React Navigation基础使用

前端之家收集整理的这篇文章主要介绍了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.@R_454_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>
)

猜你在找的React相关文章