React Navigation基础使用

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);

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.跳转页面

//获取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>
)