1. 创建项目并安装
- react-native init ExampleApp
- cd ExampleApp
- react-native install --save react-navigation
2. 运行app
- react-native run-android
- react-native run-ios
3. 注册
- const SimpleApp = StackNavigator({
- Home: { screen: HomeScreen },});
-
- AppRegistry.registerComponent('SimpleApp',() => SimpleApp);
@H_404_41@4.组件定义
- class ChatScreen extends React.Component {
- static navigationOptions = {
- title: 'Chat with Lucy',};
- render() {
- return (
- <View>
- <Text>Chat with Lucy</Text>
- </View>
- );
- }
- }
static navigationOptions 静态定义navigation可选项,定义标题。
5.@R_422_404@面
- //获取navigate
- const {navigate} = this.props.navigation;
- navigate('Home')
6.传参数和获取navigate传过来的参数
- 传参数
- //获取navigate
- const {navigate} = this.props.navigation;
- navigate('Home',{param:'param'})
- 接收参数
- static navigationOptions = ({ navigation }) => ({
- title: `Chat with ${navigation.state.params.param}`,});
- const {params} = this.props.navigation.state;
- return(
- <View>
- <Text>Chat with {params.param}</Text>
- </view>
- )