我试图在我的应用程序中的屏幕之间传递数据。目前我正在使用
"react-native": "0.46.0",
"react-navigation": "^1.0.0-beta.11"
我有我的index.ios
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
然后秒屏
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';
const SecondScreen = (props) => {
const { navigate } = props.navigation;
console.log("PROPS" + this.props.navigation.state);
return (
<View>
<Text>
HI
</Text>
</View>
);
}
SecondScreen.navigationOptions = {
title: 'Second Screen Title',
};
export default SecondScreen
每当我调试console.log时,我都会被定义。 https://reactnavigation.org/docs/navigators/navigation-prop文档说每个屏幕应该有这些价值我做错了什么?
在你的代码中,props.navigation和this.props.navigation.state是两个不同的东西。您应该在第二个屏幕中尝试这个:
const {state} = props.navigation;
console.log("PROPS " + state.params.user);
const {state}
专线只是为了获得易于阅读的代码。
头等舱
<Button onPress = {
() => navigate("ScreenName", {name:'Jane'})
} />
二等
const {params} = this.props.navigation.state
反应导航3. *
this.props.navigation.navigate('Child', {
something: 'Some Value',
});
this.props.navigation.state.params.something // outputs "Some Value"
您可以使用相关组件(SecondScreen)中的user
访问您的参数props.navigation.state.params.user
。
从反应导航3.x qazxsw poi,你可以使用qazxsw poi。
docs
我开发了一个NPM包,用于将数据从一个组件发送到其他组件。请检查并使用它易于使用。
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>
);
}
}
评论任何帮助。