React Native 页面跳转react-navigation导航器的使用

前端之家收集整理的这篇文章主要介绍了React Native 页面跳转react-navigation导航器的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

啥都不说了 先来效果

看下入门文档

https://reactnavigation.org/docs/intro/

里面有三个导航器

我现在只用StackNavigator 这个用于页面跳转

然后上代码

index.android.js

  1. import React from 'react';
  2. import {
  3. AppRegistry,Text,View,Button,} from 'react-native';
  4. //导入stack导航组件
  5. import {StackNavigator} from 'react-navigation';
  6. import ChatScreen from './ChatScreen'
  7. class HomeScreen extends React.Component {
  8. static navigationOptions = {
  9. title: 'Welcome',//标题
  10. };
  11.  
  12. render() {
  13. const { navigate } = this.props.navigation;
  14. return (
  15. <View>
  16. <Text>Hello,Chat App!</Text>
  17. <Button
  18. onPress={() => navigate('Chat')}
  19. title="Chat with Lucy"
  20. />
  21. </View>
  22. );
  23. }
  24. }
  25. //导航注册
  26. const SimpleApp = StackNavigator({
  27. Home: {screen: HomeScreen},Chat: { screen: ChatScreen },//新添加页面
  28. });
  29.  
  30. AppRegistry.registerComponent('second',() => SimpleApp);

第二个页面

  1. /** * Created by liuml on 2017/9/18. */
  2.  
  3. import React from 'react';
  4. import {
  5. AppRegistry,} from 'react-native';
  6. import {StackNavigator} from 'react-navigation';
  7. class ChatScreen extends React.Component {
  8. static navigationOptions = {
  9. title: 'Chat with Lucy',};
  10.  
  11. render() {
  12. const {navigate} = this.props.navigation;
  13. return (
  14. <View>
  15. <Text>Chat with Lucy</Text>
  16. <Button
  17. onPress={() => navigate('Chat')}
  18. title="Chat with Lucy"
  19. />
  20. </View>
  21.  
  22. );
  23. }
  24. }
  25.  
  26. module.exports = ChatScreen;

可以看到 主要用了navigate 来跳转

但是也得先注册

  1. //导航注册
  2. const SimpleApp = StackNavigator({
  3. Home: {screen: HomeScreen},//新添加页面
  4. });

如何隐藏导航条 使用自己的

http://blog.csdn.net/u011690583/article/details/70333972

这个说的不错

猜你在找的React相关文章