doubleyong
管理员
管理员
  • 最后登录2022-01-18
  • 发帖数1052
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:596回复:0

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

楼主#
更多 发布于:2021-09-17 09:49
参考文档:

官网 - > 文档 ->  交互 -》 使用导航器跳转页面
网址: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') //激活的图标
                     }
                 }
             }]
        }
    }
}
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号