[react-native]react-native跳转页面的方法

参考文档：

官网 - > 文档 ->  交互 -》 使用导航器跳转页面
网址：https://reactnative.cn/docs/navigation




使用原生导航：
react-native-navigation


组件文档：
https://wix.github.io/react-native-navigation/docs

react-native-navigation的使用


1. 安装 ：


npm install --save react-native-navigation
npx rnn-link


2. 使用：


2.1. 导入(index.js 入口文件)
import { Navigation } from "react-native-navigation";




2. 2. 配置
可以在index入口文件，或者navigation文件夹下，index.js中，进行如下配置


//1. 导入路由所跳转的组件
import App from './App'  


//2. 在路由中，注册App组件
Navigation.registerComponent('WelcomeScreen', () => App);  // 第一个参数为注册组件的name名称


//3. 设置路由, 如下为根路由的设置

const WelcomeScreen = {
    root: {
     stack: {
       id:'WECLCOMESCREEN',  //栈的id为全大写的名称
        children: [
          {
            component: {
              name: 'App' //组件名称
            }
          }
        ]
      }
    }
 }

Navigation.events().registerAppLaunchedListener(() => {
       Navigation.setRoot(WelcomeScreen);
    });

//4. 其它配置
Navigation.setDefaultOptions 默认的APP导航样式的设置

Navigation.setDefaultOptions({
     //https://wix.github.io/react-native-navigation/api/options-bottomTabs 中查阅
    bottomTabs:{
        //enum('alwaysShow','showWhenActive','alwaysHide') 
        // 默认：showWhenActive
        titleDisplayMode:'alwaysShow'
    }, //设置APP底部的整体TABS的配置
    statusBar:{
        backgroundColor:'rgba(255,255,255,.8)', //设置状态栏的背景色
        style:'dark', //手机的模式，设置文字和手机信息等字体的颜色
        visible:true //false,不显示状态栏，true表示显示
    }, //手机状态栏的配置
    topBar:{
        title:{
           color:"black"
        },
        backButton:{
           color:"#666"
        },
        background:{
           color:"#fff"
        }
    }, //APP的顶部设置
   bottomTab:{
       fontSize:12,
       selectedFontSize:14,
       iconWidth:20,
       iconHeight:20,
       textColor:'#666',
       selectedTextColor:"#0099FF",
       fontWeight:700
   } // APP的底部的tab的配置
})

bottomTabs的设置

export const MainRoot={
     root:{
         // 建议在栈中嵌套bottomTabs, bottomTabs中,嵌套stack
         bottomTabs:{
             id:"BOTTOM_TABS_LAYER",
             children:[{
                 //每一个对象就是一个bottomTabs选择卡对象
                 stack:{
                     id:"HOME_TAB",
                     children:[
                         {
                             component:{
                                 id:"GO_CIRCLE_SCREEN",
                                 name:"GoCircle"
                             }
                         }
                     ]
                 },
                 options:{
                     bottomTab:{
                         text:'Go圈', //bottomTabs显示的文本
                         icon:require('../assets/images/bts_gocircle_d.png'), //默认图标
                         selectedIcon:require('../assets/images/bts_gocircle_ac.png') //激活的图标
                     }
                 }
             }]
        }
    }
}