React Native - 跨屏幕传递数据
React Native - Passing Data Across Screens
我在使用 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
file/screen.
<TouchableHighlight onPress={(id) => {
const { navigate } = this.props.navigation;
navigate('Category', { category: id });
}}>
<Text>{name}</Text>
</TouchableHighlight>
当我点击该元素时,屏幕确实切换到 category
,但是它无法发送 props
数据。
因此,当我检查 Category
屏幕中的数据时,它 returns 未定义。我试过以下方法:
this.props.category
this.props.navigation.state.category;
this.props.navigation.state.params.category
我怎样才能访问我传入的数据
navigate
方法?
navigate('Category', { category: id });
编辑:这是我的实际代码结构:
data
来自 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>
);
}
来自父屏幕:
navigate({ routeName: 'Category', params: { category: id } })
或
navigate('Category', { category: id })
来自子屏幕:
const category = this.props.navigation.state.params.category
您的问题不是发送参数。您发送正确并且阅读正确。您的错误与您的 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
所以看看上面描述的问题,我认为你正在寻找类似 screenProps
的东西(已记录 here)。
这允许您跨屏幕传递特定道具。
希望对您有所帮助。如果您还需要什么,请告诉我。
使用以下代码片段,您可以导航到具有某些值的另一个屏幕。
navigate({ Home: 'HomeScreen', params: { username: 'abcd' } })
您可以在 HomeScreen 使用
收集参数
this.props.navigation.state.params.username
我在使用 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
file/screen.
<TouchableHighlight onPress={(id) => {
const { navigate } = this.props.navigation;
navigate('Category', { category: id });
}}>
<Text>{name}</Text>
</TouchableHighlight>
当我点击该元素时,屏幕确实切换到 category
,但是它无法发送 props
数据。
因此,当我检查 Category
屏幕中的数据时,它 returns 未定义。我试过以下方法:
this.props.category
this.props.navigation.state.category;
this.props.navigation.state.params.category
我怎样才能访问我传入的数据
navigate
方法?
navigate('Category', { category: id });
编辑:这是我的实际代码结构:
data
来自 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>
);
}
来自父屏幕:
navigate({ routeName: 'Category', params: { category: id } })
或
navigate('Category', { category: id })
来自子屏幕:
const category = this.props.navigation.state.params.category
您的问题不是发送参数。您发送正确并且阅读正确。您的错误与您的 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
所以看看上面描述的问题,我认为你正在寻找类似 screenProps
的东西(已记录 here)。
这允许您跨屏幕传递特定道具。
希望对您有所帮助。如果您还需要什么,请告诉我。
使用以下代码片段,您可以导航到具有某些值的另一个屏幕。
navigate({ Home: 'HomeScreen', params: { username: 'abcd' } })
您可以在 HomeScreen 使用
收集参数this.props.navigation.state.params.username