使用 React-Native Navigation 传递数据
Posted
技术标签:
【中文标题】使用 React-Native Navigation 传递数据【英文标题】：Passing Data Using React-Native Navigation 【发布时间】：2017-12-19 23:05:55 【问题描述】：我试图在我的应用程序的屏幕之间传递数据。目前我正在使用
"react-native": "0.46.0",
"react-navigation": "^1.0.0-beta.11"
我有我的 index.js
import React, Component from 'react';
import
AppRegistry,
from 'react-native';
import App from './src/App'
import StackNavigator from 'react-navigation';
import SecondScreen from './src/SecondScreen'
class med extends Component
static navigationOptions =
title: 'Home Screen',
;
render()
const navigation = this.props;
return (
<App navigation= navigation />
);
const SimpleApp = StackNavigator(
Home: screen: med ,
SecondScreen: screen: SecondScreen, title: 'ss' ,
);
AppRegistry.registerComponent('med', () => SimpleApp);
应用为
import React, Component from 'react';
import
StyleSheet,
Text,
Button,
View
from 'react-native';
import StackNavigator from 'react-navigation';
const App = (props) =>
const navigate = props.navigation;
return (
<View>
<Text>
Welcome to React Native Navigation Sample!
</Text>
<Button
onPress=() => navigate('SecondScreen', user: 'Lucy' )
title="Go to Second Screen"
/>
</View>
);
export default App
然后在 secondscreen.js 中，我们将获取从前一个屏幕传递过来的数据
import React, Component from 'react';
import
StyleSheet,
Text,
View,
Button
from 'react-native';
import StackNavigator from 'react-navigation';
const SecondScreen = (props) =>
const state = props.navigation;
console.log("PROPS" + state.params);
return (
<View>
<Text>
HI
</Text>
</View>
);
SecondScreen.navigationOptions =
title: 'Second Screen Title',
;
export default SecondScreen
每当我 console.log 我得到未定义。https://reactnavigation.org/docs/navigators/navigation-prop 文档说每个屏幕都应该有这些值我做错了什么？
【问题讨论】：
【参考方案1】：在您的代码中，props.navigation 和 this.props.navigation.state 是两个不同的东西。你应该在第二个屏幕上试试这个：
const state = props.navigation;
console.log("PROPS " + state.params.user);
const state 行只是为了获得易于阅读的代码。
【讨论】：
你如何动态地做到这一点？所以我想将一组对象从一个屏幕传递到另一个屏幕，这是我们可以做的吗？或将选定对象的数据传递到下一个屏幕？非常感谢！！！【参考方案2】：所有其他答案现在似乎都已过时。在当前的 react 导航版本 ("@react-navigation/native": "^5.0.8",) 中，您首先像这样在一个屏幕之间传递值：
function HomeScreen( navigation )
return (
<View style= flex: 1, alignItems: 'center', justifyContent: 'center' >
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress=() =>
/* 1. Navigate to the Details route with params, passing the params as an object in the method navigate */
navigation.navigate('Details',
itemId: 86,
otherParam: 'anything you want here',
);
/>
</View>
);
然后在你重定向的组件中，你会得到你传递的数据，如下所示：
function DetailsScreen( route, navigation )
/* 2. Get the param */
const itemId = route.params;
const otherParam = route.params;
return (
<View style= flex: 1, alignItems: 'center', justifyContent: 'center' >
<Text>Details Screen</Text>
<Text>itemId: JSON.stringify(itemId)</Text>
<Text>otherParam: JSON.stringify(otherParam)</Text>
</View>
);
所以，基本上，数据现在在this.props.route.params 中。在上面的那些例子中，我展示了如何从函数组件中获取它们，但是在类组件中是类似的，我做了这样的事情：
首先我从这个 ProfileButton 传递数据，在它的 handleNavigate 函数中，像这样：
// these ProfileButton and ProfileButtonText, are a Button and a Text, respectively,
// they were just styled with styled-components
<ProfileButton
onPress=() => this.handleNavigate(item)
<ProfileButtonText>
check profile
</ProfileButtonText>
</ProfileButton>
handleNavigate 的位置如下：
handleNavigate = user =>
// the same way that the data is passed in props.route,
// the navigation and it's method to navigate is passed in the props.
const navigation = this.props;
navigation.navigate('User', user);
;
然后，函数 HandleNavigate 重定向到用户页面，这是一个类组件，我得到这样的数据：
import React, Component from 'react';
import View, Text from 'react-native';
export default class User extends Component
state =
title: this.props.route.params.user.name,
;
render()
const title = this.state;
return (
<View>
<Text>title</Text>
</View>
);
在类组件中，我发现这条线很长 title: this.props.route.params.user.name, 但它有效。如果有人知道如何在当前版本的 react-native 导航中使其更短，请赐教。我希望这能解决您的问题。
【讨论】：
【参考方案3】：头等舱
<Button onPress =
() => navigate("ScreenName", name:'Jane')
/>
二等
const params = this.props.navigation.state
【讨论】：
【参考方案4】：反应导航 3.*
父类
this.props.navigation.navigate('Child',
something: 'Some Value',
);
儿童班
this.props.navigation.state.params.something // outputs "Some Value"
【讨论】：
【参考方案5】：您可以访问您的参数user，并在相关组件（SecondScreen）中使用props.navigation.state.params.user。
【讨论】：
这也很有效，谢谢我只是缺少参数。【参考方案6】：从 react navigaton 3.x docs，你可以使用getParam(params)。
class SecondScreen extends React.Component
render()
const navigation = this.props;
const fname = navigation.getParam('user');
return (
<View>
<Text>user: JSON.stringify(fname)</Text>
</View>
);
【讨论】：
我还没有尝试过，但似乎是解决新版本反应问题的更有希望的方法。【参考方案7】：2021 年，您可以使用 fetch
this.props.route.params.data
【讨论】：
【参考方案8】：我开发了一个 NPM 包，用于将数据从一个组件发送到其他组件。请务必检查并使用它的易用性。
React data navigation
import DataNavigation from 'react-data-navigation';
.
.
.
// For set the data you need to call setData(key, value) Function i.e.
// eg. DataNavigation.setData('name', 'Viren');
// it will set the 'Viren' as respect to 'name' key.
import DataNavigation from 'react-data-navigation';
.
.
.
// Here we want to get the name value, which you set in home component than
// console.log('Hey my name is' + DataNavigation.getData('name'));
// it will print in console : Hey my name is Viren.
评论下来寻求帮助。
【讨论】：
【参考方案9】：使用钩子
Screen1.js
navigation.navigate('Screen2', user_name: 'aaa',room_id:'100' );
Screen2.js
export default function Screen2(navigation)
return(
<View>
<Text> navigation.getParams('user_name') </Text>
</View>
)
【讨论】：
【参考方案10】：功能组件。
首屏 如何进入另一个屏幕并将数据从一个屏幕传递到另一个屏幕。
<TouchableOpacity onPress=()=>props.navigation.navigate("screenName",name:'saurabh')>
</TouchableOpacity>
第二屏 使用以下方式，我们可以从第一个屏幕到第二个屏幕获取数据。
props.navigation.state.params.name
Es6：
const Data= props.navigation.state.params.name;
组件（秒屏）：
const SecondScreen=(props)=>
const Data= props.navigation.state.params;
return(
<View>
<Text>Data.name</Text>
</View>
)
export default SecondScreen;
您可以查看Demo Here:
【讨论】：
以上是关于使用 React-Native Navigation 传递数据的主要内容，如果未能解决你的问题，请参考以下文章
在另一个 React-Native 库中使用 React-Native 库
使用 react-native run-android 运行时出现 React-Native 错误
React-native：如何在 React-native 中使用（和翻译）带有 jsx 的 typescript .tsx 文件？
使用 react-native router-flux 时，BackHandler 在 react-native 侧面菜单中不起作用