React Native - 跨屏幕传递数据
Posted
技术标签:
【中文标题】React Native - 跨屏幕传递数据【英文标题】：React Native - Passing Data Across Screens 【发布时间】：2018-03-13 14:36:37 【问题描述】：我在使用 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 );
编辑：这是我的实际代码结构：
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>
);
【问题讨论】：
【参考方案1】：使用以下代码 sn-p，您可以导航到具有某些值的另一个屏幕。
navigate( Home: 'HomeScreen', params: username: 'abcd' )
您可以使用 HomeScreen 收集参数，
this.props.navigation.state.params.username
【讨论】：
【参考方案2】：因此，查看上述问题，我认为您正在寻找类似screenProps（记录在here）的内容。
这允许您跨屏幕传递特定的道具。
我希望这会有所帮助。如果您还有其他需要，请告诉我。
【讨论】：
【参考方案3】：您的问题不是发送参数。您发送正确并正确阅读。您的错误与您的 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
【讨论】：
非常感谢！我已经被这火困住了一段时间。我是否因为将id 变量设置为参数而覆盖了它？
是的，您正在覆盖参数，因此您尝试传递的 id 实际上并不是您在 for 循环中创建的 id。【参考方案4】：
从父屏幕：
navigate( routeName: 'Category', params: category: id )
或
navigate('Category', category: id )
从子屏幕：
const category = this.props.navigation.state.params.category
【讨论】：
我刚试过这个，但它似乎仍然返回undefined。
你的id从哪里来的以上是关于React Native - 跨屏幕传递数据的主要内容，如果未能解决你的问题，请参考以下文章
如何将数据传递到屏幕上的抽屉customcomponent in react native？
使用带有Stack Navigator的React Native Navigation将数据从屏幕传递到其他屏幕
使用 React-Native Navigation 传递数据