react-native使用导航器跳转页面

Posted on | In |

react-native中导航库react-navigation实现过程：

  • 安装库

npm install --save react-navigation

  • index.ios.js中代码示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    import React from 'react';
    import {
      AppRegistry,
      View,
      Text,
      Button
    } from 'react-native';
    import { StackNavigator } from 'react-navigation'; // 引入
    import ChatScreen from './src/component/ChatScreen';
    class HomeScreen extends React.Component {
      static navigationOptions = {
        title: 'Welcome',
      };
      render() {
        const { navigate } = this.props.navigation;
        return (
          <View>
            <Text>Hello, Navigation!</Text>
             <Button
              onPress={() => navigate('Chat')}
              title="Chat with Lucy"
            />
          </View>
         )
      }
    }
    const AwesomeProject = StackNavigator({
      Home: { screen: HomeScreen },
      Chat: { screen: ChatScreen },
    });
    AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

  • 在根目录建文件夹./src/component,并创建文件ChatScreen.js

ChatScreen.js代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from 'react';
import {
  Text,
  View
} from 'react-native';
export default class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

  • 实现过程所遇问题：
    • index.ios.js 最后注册的是将导航栏 AwesomeProject，此处注册的不是 HomeScreen