gpt4 book ai didi

javascript - React Native - 跨屏幕传递数据

转载 作者:数据小太阳 更新时间:2023-10-29 04:43:24 28 4
gpt4 key购买 nike

我在使用 react-native 应用程序时遇到了一些问题。我不知道如何跨屏幕传递数据。

我意识到在 SO 上还回答了其他类似的问题,但是这些解决方案对我不起作用。

我正在使用 StackNavigator。这是我在 App.js 文件中的设置。

export default SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Categories: { screen: CategoriesScreen }, // send from here
Category: { screen: CategoryScreen } // to here
});

我有一个 TouchableHighlight 组件,它有一个 onPress 事件,可以导航到所需的屏幕。这是在我的 Categories.js 文件/屏幕上。

<TouchableHighlight onPress={(id) => {
const { navigate } = this.props.navigation;
navigate('Category', { category: id });
}}>
<Text>{name}</Text>
</TouchableHighlight>

当我点击该元素时,屏幕确实切换到 category,但是它无法发送 props 数据。

因此,当我检查我的 Category 屏幕中的数据时,它返回未定义。我尝试了以下方法:

this.props.category
this.props.navigation.state.category;
this.props.navigation.state.params.category

我究竟如何访问我传入的数据navigate 方法?

navigate('Category', { category: id });

编辑:这是我的实际代码结构:

数据来自API

for (var i = 0; i < data.length; i++) {
var name = data[i].name;
var id = data[i].id;
categoryComponents.push(
<Card key={id}>
<CardItem>
<Body>
<TouchableHighlight onPress={(id) => {
const { navigate } = this.props.navigation;
navigate('Category', { params: { category: id } });
}}>
<Text>{name + " " + id}</Text>
</TouchableHighlight>
</Body>
</CardItem>
</Card>
);
}

最佳答案

您的问题不是发送参数。您发送正确并且阅读正确。您的错误与您的 id 未定义有关。

你应该像下面这样修复你的代码,

for (var i = 0; i < data.length; i++) {
var name = data[i].name;
var id = data[i].id;
categoryComponents.push(
<Card key={id}>
<CardItem>
<Body>
<TouchableHighlight onPress={(event) => {
// onPress event fires with an event object
const { navigate } = this.props.navigation;
navigate('Category', { category: id });
}}>
<Text>{name + " " + id}</Text>
</TouchableHighlight>
</Body>
</CardItem>
</Card>
);
}

您可以像下面这样阅读您的参数。

this.props.navigation.state.params.category

关于javascript - React Native - 跨屏幕传递数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46526939/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com