GVKun编程网logo

react native navigator 的使用（react native 应用）

11

对于reactnativenavigator的使用感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解reactnative应用，并且为您提供关于ReactNativeAndroidNaviga

对于react native navigator 的使用感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解react native 应用，并且为您提供关于React Native Android Navigator的使用、react native Navigator、react native Navigator使用踩的坑、React Native 之createDrawerNavigator和createSwitchNavigator的宝贵知识。

本文目录一览：

react native navigator 的使用（react native 应用）

import React,{ Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

Navigator,

TouchableOpacity,


} from 'react-native';


// 使用Component的好处是,可以自动生成注释

class FirstPage extends Component {

// 填出提示框

onPress(){

//alert("This is Shining!");

this.props.navigator.pop();

}

/**

* 跳转页面至SecondPage

* @param name 传递参数

* @param type 动画类型

*/

gotoNext(name,type = 'normal') {

this.props.navigator.push({

component: SecondPage,

passprops: {

id: name

},

onPress: this.onPress.bind(this),

rightText: 'ALERT!',

type: type

})

}


render() {

// 点击按钮使用Home页面入栈

return (

<View style={styles.container}>

<TouchableOpacity

style={styles.button}

onPress={()=>this.gotoNext('第一页')}>

<Text style={styles.buttonText}>

{'跳转至第二页(右出)'}

</Text>

</TouchableOpacity>

<TouchableOpacity

style={styles.button}

onPress={()=>this.gotoNext('第一页','Modal')}>

<Text style={styles.buttonText}>

{'跳转至第二页(底部)'}

</Text>

</TouchableOpacity>

</View>

);

}

}


/**

* 第二页

*/

class SecondPage extends Component {


nextPageOnpress = ()=>{

// alert('第三页导航栏rightButton click');

this.props.navigator.push({

component:SecondPage,

passprops: {

id: '临时第yi页'

}

})

}


render() {

return (

<View style={styles.container}>

<TouchableOpacity

style={styles.button}

onPress={()=>this.props.navigator.pop()}>

<Text style={styles.buttonText}>

返回上一页,来源: {this.props.id}

</Text>

</TouchableOpacity>

<TouchableOpacity

style={styles.button}

onPress={()=>this.props.navigator.push({

component:ThirdPage,

passprops:{

name:'3rd Page'

},

title:'第三页标题',

rightText:'HIHI',

onPress:this.nextPageOnpress,

type:'Modal',


})}>

<Text style={styles.buttonText}>

跳转至下一页

</Text>

</TouchableOpacity>

</View>

);

}

}


class ThirdPage extends Component {

render() {

return (

<View style={styles.container}>

<TouchableOpacity

style={styles.button}

onPress={()=>this.props.navigator.pop()}>

<Text style={styles.buttonText}>

Third Page Now,+ {this.props.name}

</Text>

</TouchableOpacity>

</View>

);

}

}


// 导航栏的Mapper

var NavigationBarRouteMapper = {

// 左键

LeftButton(route,navigator,index,navstate){

if (index > 0) {

return (

<View style={styles.navContainer}>

<TouchableOpacity

underlayColor='transparent'

onPress={()=> {if (index >0) { navigator.pop()}}}>

<Text style={styles.leftNavButtonText}>

Back

</Text>

</TouchableOpacity>

</View>

);

} else {

return null;

}

},

// 右键

RightButton(route,navstate) {

if (route.onPress)

return (

<View style={styles.navContainer}>

<TouchableOpacity

onPress={() => route.onPress()}>

<Text style={styles.rightNavButtonText}>

{route.rightText || '右键'}

</Text>

</TouchableOpacity>

</View>

);

},


// 标题

Title(route,navstate){

return (

<View style={styles.navContainer}>

<Text style={styles.title}>

{route.title || 'Application Title'}

</Text>

</View>

);

}

};


// 主模块

class UniformView extends Component {

/**

* 使用动态页面加载

* @param route 路由

* @param navigator 导航器

* @returns {XML} 页面

*/

renderScene(route,navigator) {

return <route.component navigator={navigator} {...route.passprops} />;

}


configureScene(route,routeStack){

if (route.type == 'Modal') {

return Navigator.SceneConfigs.FloatFromBottom;

}

return Navigator.SceneConfigs.PushFromright;

}


render() {

return (

<Navigator

style={{flex:1}}

initialRoute={{name:'FirstPage',component:FirstPage}}

configureScene={this.configureScene}

renderScene={this.renderScene}

navigationBar={

<Navigator.NavigationBar

style={styles.navContainer}

routeMapper={NavigationBarRouteMapper}/>}

/>

);

}

}


const styles = StyleSheet.create({

// 页面框架

container: {

flex: 4,

marginTop: 100,

flexDirection: 'column',

backgroundColor: 'yellow'

},

// 导航栏

navContainer: {

backgroundColor: '#81c04d',

paddingTop: 12,

paddingBottom: 10,

},

// 导航栏文字

headText: {

color: '#ffffff',

fontSize: 22

},

// 按钮

button: {

height: 60,

marginTop: 10,

justifyContent: 'center',// 内容居中显示

backgroundColor: '#ff1049',

alignItems: 'center'

},

// 按钮文字

buttonText: {

fontSize: 18,

color: '#ffffff'

},

// 左面导航按钮

leftNavButtonText: {

color: '#ffffff',

fontSize: 18,

marginLeft: 13

},

// 右面导航按钮

rightNavButtonText: {

color: '#ffffff',

marginRight: 13

},

// 标题

title: {

fontSize: 18,

color: '#fff',

textAlign: 'center',

alignItems: 'center',

fontWeight: 'bold',

flex: 1 //Step 3

}

});


AppRegistry.registerComponent('TheTenth',() => UniformView);

React Native Android Navigator的使用

React Native Android Navigator的使用

一. 首先在 index.Android.js 中 

render: function() {
    return (

        <Navigator

          initialRoute={{id: 'NewsList',name: 'Index'}}// 初始化 route 中的数据
          renderScene={this.renderScene.bind(this)}
          // 配置路由方法  renderScene
          //可选的函数，用来配置场景动画和手势。会带有一个路由参数调用，然后它应当返回一个场景配置对象
          configureScene={(route) => {

            if (route.sceneConfig) {
              return route.sceneConfig;
            }
            return Navigator.SceneConfigs.FloatFromright;
          }} />

    );
  }

在 renderScene 方法中 配置路由 

renderScene(route,navigator) {
    var routeId = route.id;
    if (routeId === 'NewsList') {

      return (
      // 将 navigator 
        <NewsList name  传递给下个页面  
          navigator={navigator} name={route.name} />
      );
    }else if(routeId === 'NewsLists'){
      return(
            <NewsList2
            navigator={navigator}  />
            );
    }//未配置路由 
        return this.noroute(route,navigator);
  },

3 未配置路由的方法 显示一个提示的页面,

 noroute(navigator) { return ( <View style={{flex: 1,alignItems: 'stretch',justifyContent: 'center'}}> <TouchableOpacity style={{flex: 1,alignItems: 'center',justifyContent: 'center'}} onPress={() => navigator.pop()}> <Text style={{color: 'red',fontWeight: 'bold'}}>请在 index.js 的 renderScene 中配置这个页面的路由</Text> </TouchableOpacity> </View> ); },
  1. 在 newsList.js 中 
// 返回到新的页面 
  this.props.navigator.pop();
// 跳转到新的页面 
this.props.navigator.push({
      id: 'PersonPage',name: '我的主页',});

更多参考 http://react-native.cn/docs/navigator.html#content

例子下载

感谢 文同学 帮助解决数据传递
感谢 天地之灵同学 纠正错误

添加 NavigationBar 好像是因为版本的问题 title 是没办法居中 版本0.16.00


在render 中 

<Navigator
          renderScene={this.renderScene.bind(this)}
          navigationBar={
            <Navigator.NavigationBar style={{backgroundColor: '#246dd5',alignItems: 'center'}}
                routeMapper={NavigationBarRouteMapper} />
          } />

最外面 定义 NavigationBarRouteMapper 

var NavigationBarRouteMapper = { LeftButton(route,navigator,index,navstate) { return null; },RightButton(route,Title(route,navstate) { return ( <View style={{ flex: 1,justifyContent:'center',alignItems:'center',}}> <Text style={{color: 'white',backgroundColor: '#ffffff',}}> 登录 </Text> </View> ); } };

react native Navigator

下面代码来自http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bnavigator%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3%E4%BB%A5%E5%8F%8A%E5%AE%9E%E4%BE%8B23/

/**
* 导航器组件实例
* https://github.com/facebook/react-native
*/
'use strict';
import React,{
AppRegistry,Component,StyleSheet,Text,View,TouchableHighlight,Navigator,} from 'react-native';

class NavButton extends React.Component {
render() {
return (
<TouchableHighlight
style={styles.button}
underlayColor="#B5B5B5"
onPress={this.props.onPress}>
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}
class NavMenu extends React.Component {
render() {
return (
<View style={styles.scene}>
<Text style={styles.messageText}>{this.props.message}</Text>
<NavButton
onPress={() => {
this.props.navigator.push({
message: '向右拖拽关闭页面',sceneConfig: Navigator.SceneConfigs.FloatFromright,});
}}
text="从右边向左切入页面(带有透明度变化)"
/>
<NavButton
onPress={() => {
this.props.navigator.push({
message: '向下拖拽关闭页面',sceneConfig: Navigator.SceneConfigs.FloatFromBottom,});
}}
text="从下往上切入页面(带有透明度变化)"
/>
<NavButton
onPress={() => {
this.props.navigator.pop();
}}
text="页面弹出(回退一页)"
/>
<NavButton
onPress={() => {
this.props.navigator.popToTop();
}}
text="页面弹出(回退到最后一页)"
/>
</View>
);
}
}
class NavigatorDemo extends Component {
render() {
return (
<Navigator
style={styles.container}
initialRoute={{ message: '初始页面',}}
renderScene={ (route,navigator) => <NavMenu
message={route.message}
navigator={navigator}
/>}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.FloatFromBottom;
}}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,},messageText: {
fontSize: 17,fontWeight: '500',padding: 15,marginTop: 50,marginLeft: 15,button: {
backgroundColor: 'white',borderBottomWidth: StyleSheet.hairlinewidth,borderBottomColor: '#CDCDCD',});

AppRegistry.registerComponent('NavigatorDemo',() => NavigatorDemo);

运行报错，navigator is deprecated and has been removed。

打开当前目录，

npm install react-native-deprecated-custom-components --save

import {Navigator} from 'react-native-deprecated-custom-components';

修改后代码如下

'use strict';
import React,{Component} from 'react';
import  {
  AppRegistry,} from 'react-native';
import {Navigator} from 'react-native-deprecated-custom-components';
class NavButton extends Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#B5B5B5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}
class NavMenu extends React.Component {
  render() {
    return (
      <View style={styles.scene}>
        <Text style={styles.messageText}>{this.props.message}</Text>
        <NavButton
          onPress={() => {
            this.props.navigator.push({
              message: '向右拖拽关闭页面',});
          }}
          text="从右边向左切入页面(带有透明度变化)"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.push({
              message: '向下拖拽关闭页面',});
          }}
          text="从下往上切入页面(带有透明度变化)"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.pop();
          }}
          text="页面弹出(回退一页)"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.popToTop();
          }}
          text="页面弹出(回退到最后一页)"
        />
      </View>
    );
  }
}
class NavigatorDemo extends Component {
  render() {
    return (
      <Navigator
        style={styles.container}
        initialRoute={{ message: '初始页面',}}
        renderScene={ (route,navigator) => <NavMenu
            message={route.message}
            navigator={navigator}
          />}
         configureScene={(route) => {
          if (route.sceneConfig) {
            return route.sceneConfig;
          }
          return Navigator.SceneConfigs.FloatFromBottom;
        }}
      />
    );
  }
}
const styles = StyleSheet.create({
   container: {
    flex: 1,messageText: {
    fontSize: 17,button: {
    backgroundColor: 'white',});

AppRegistry.registerComponent('testrn',() => NavigatorDemo);

react native Navigator使用踩的坑

下载了个例子，真机安装，使用命令：react-native run-android 安装运行到手机上后总是白屏。

例子的index.android.js如下：

import React,{ Component} from 'react';
import { AppRegistry,Text,View,TouchableOpacity, StyleSheet,Navigator} from 'react-native';
import DemoView from './Commonjs/DemoView'
import TestView from './Commonjs/TestView'
import Loading from './Commonjs/Demo/Loading'
import MovieList from './Commonjs/Demo/MovieList'

class MyProject extends Component {

renderScene( router,navigator) {
switch ( router. component) {
case 'Home':
return (
< View style={ Styles. View} >
< TouchableOpacity onPress={() => navigator. push({ component: 'Test'})} >
< Text style={ Styles. Button} >Test </ Text >
</ TouchableOpacity >
< TouchableOpacity onPress={() => navigator. push({ component: 'Demo'})} >
< Text style={[ Styles. Button,Styles. UnderButton]} >Demo </ Text >
</ TouchableOpacity >
</ View >);
case 'Demo':
return ( < DemoView navigator={ navigator} />);
case 'Test':
return ( < TestView navigator={ navigator} />);
case 'Loading':
return ( < Loading navigator={ navigator} />);
case 'MovieList':
return ( < MovieList navigator={ navigator} />);
}
}

render() {
return (
< Navigator
style={{ flex: 1}}
initialRoute={{ component: 'Home'}}
renderScene={ this. renderScene}
configureScene={( route,routeStack) => Navigator. SceneConfigs. FadeAndroid} />
);
}
}

var Styles = StyleSheet. create({
View: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
Button: {
fontSize: 30,
backgroundColor: 'skyblue',
width: 150,
height: 50,
textAlign: 'center',
UnderButton: {
marginTop: 40,
}
})

AppRegistry. registerComponent( 'MyProject',() => MyProject);


解决方法：

1，首先解决白屏的问题

手机上打开app后白屏，摇一摇也没有开发者菜单：手机设置——》“其他应用管理”——》找到刚安装的应用程序，并打开——》“权限管理”——》“显示悬浮框”；

此时重启app，再摇一摇就可以出来开发者菜单，在开发者菜单中启动远程调试，可以看到程序输出的错误：

'Navigator is deprecated and has been removed from this package. It can Now be installed and imported from `react-native-deprecated-custom-components` instead of `react-native`.

2，解决导航问题

npm installreact-native-deprecated-custom-components --save

import { Navigator} from 'react-native-deprecated-custom-components'
3，总结获得

1）解决了摇一摇无法出现开发者菜单的问题；

2）实现了使用谷歌浏览器结合针灸进行远程调试的方法，可设置断点跟踪调试；

3）导航功能的使用。

React Native 之createDrawerNavigator和createSwitchNavigator

React Native 之createDrawerNavigator和createSwitchNavigator

其他代码接上篇文章

createDrawerNavigator 抽屉

createSwitchNavigator 模拟登录=>主界面

 

index.js

/**
 * @format
 */

import {AppRegistry} from ''react-native'';
import {createAppContainer} from ''react-navigation'';
import App from ''./navigators/AppNavigators'';
import {name as appName} from ''./app.json'';

AppRegistry.registerComponent(appName, () => App);

 

AppNavigators.js

import React from ''react''; //只要在页面中使用了基础组件 都需要导入这句话 不然会报错
import {Button,Platform,ScrollView,SafeAreaView} from ''react-native'';
import { createStackNavigator,
  createAppContainer,
  createBottomTabNavigator,
  createMaterialTopTabNavigator,
  createDrawerNavigator,
  DrawerItems,
  createSwitchNavigator,
 } from ''react-navigation'';
import HomePage from ''../pages/HomePage'';
import Page1 from ''../pages/Page1'';
import Page2 from ''../pages/Page2'';
import Page3 from ''../pages/Page3'';
import Page4 from ''../pages/Page4'';
import Page5 from ''../pages/Page5'';
import Login from ''../pages/Login'';
import Ionicons from ''react-native-vector-icons/Ionicons''
import MaterialIcons from ''react-native-vector-icons/MaterialIcons''


const DrawerNav=createDrawerNavigator(
  {
  Page4:{
    screen:Page4,
    navigationOptions:{
      drawerLabel:''Page4'',
      drawerIcon:({tintColor})=>(
        <MaterialIcons
          name={''drafts''}
          size={24}
          style={{color:tintColor}}
        />
      )
    }
  },
  Page5:{
    screen:Page5,
    navigationOptions:{
      drawerLabel:''Page5'',
      drawerIcon:({tintColor})=>(
        <MaterialIcons
          name={''move-to-inbox''}
          size={24}
          style={{color:tintColor}}
        />
      )
    }
  }
},
{
  initialRouteName:''Page4'',
  contentOptions:{
    activeTintColor:''#e91e63'',
  },
  contentComponent:(props)=>(
    <ScrollView style={{backgroundColor:''#789'',flex:1}}>
      <SafeAreaView forceInset={{top:''always'',horizontal:''never''}}>
        <DrawerItems {...props}/>
      </SafeAreaView>
    </ScrollView>
  )
}
);

const AppTopNavigator=createMaterialTopTabNavigator(
  {
  Page1:{
     screen:Page1,
     navigationOptions:{
       tabBarLabel: ''All''
     }
  },
  Page2:{
     screen:Page2,
     navigationOptions:{
       tabBarLabel: ''iOS''
     }
  },
  Page3:{
     screen:Page3,
     navigationOptions:{
       tabBarLabel: ''Android''
     }
  },
  Page4:{
     screen:Page4,
     navigationOptions:{
       tabBarLabel: ''React-Native''
     }
  },
},
  {
  tabBarOptions:{
    tabStyle:{mindWidth: 50},
    upperCaseLabel:false,//是否使标签大写 默认true
    scrollEndabled:true,//是否支持选项卡滚动 默认false
    style:{
      backgroundColor:''#678''//TabBar背景色
    },
    indicatorStyle:{
      height:2,
      backgroundColor:''white''
    },//标签指示器样式
    labelStyle:{
      fontSize:13,
      marginTop:6,
      marginBottom:6
    },// 文字的样式


  }
}
);

const AppBottomNavigator=createBottomTabNavigator(
  {
    Page1:{
       screen:Page1,
       navigationOptions:{
         tabBarLabel: ''最热'',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={''ios-home''}
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
    Page2:{
       screen:Page2,
       navigationOptions:{
         tabBarLabel: ''趋势'',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={''ios-appstore''} // 全部小写
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
    Page3:{
       screen:Page3,
       navigationOptions:{
         tabBarLabel: ''收藏'',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={''ios-people''}
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
    Page4:{
       screen:Page4,
       navigationOptions:{
         tabBarLabel: ''我的'',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={''ios-aperture''}
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
  },
  {
    tabBarOptions:{
      activeTintColor: Platform.OS === ''ios'' ? ''#e91e63'' : ''#fff'',
    }
  }
);

const AppStack = createStackNavigator({
    Home: {
        screen: HomePage
    },
    Page1: {
        screen: Page1
    },
    Page2: {
        screen: Page2,
        navigationOptions: {//在这里定义每个页面的导航属性，静态配置
            title: "This is Page2.",
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: (props) => {//在这里定义每个页面的导航属性，动态配置
            const {navigation} = props;
            const {state, setParams} = navigation;
            const {params} = state;
            return {
                title: params.title ? params.title : ''This is Page3'',
                headerRight: (
                    <Button
                        title={params.mode === ''edit'' ? ''保存'' : ''编辑''}
                        onPress={()=>{setParams({mode: params.mode === ''edit'' ? '''' : ''edit''})}
                            }
                    />
                ),
            }
        }
    },

    Bottom:{
      screen:AppBottomNavigator,
      navigationOptions:{
        title:''BottomNavigator''
      }
    },

    Top:{
      screen:AppTopNavigator,
      navigationOptions:{
        title:''TopNavigator''
      }
    },

    DrawerNav:{
      screen:DrawerNav,
      navigationOptions:{
        title:''This is DrawNavigator'',

      }
    }
},
 {
    defaultNavigationOptions: {
        // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    }
  }
);

const AuthStack = createStackNavigator({
    Login: {
        screen: Login
    },
},{
    navigationOptions: {
        // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    }
});

const AppStackNavigator = createSwitchNavigator(
    {
        Auth: AuthStack,
        App: AppStack,
    },
    {
        initialRouteName: ''Auth'',
    }
);

const App = createAppContainer(AppStackNavigator)
export default App
View Code

 

Login.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

 import React, {Fragment,Component} from ''react'';
 import {
   StyleSheet,
   View,
   Text,
   Button,
 } from ''react-native'';

 export default class Login extends Component {

   render(){

     const {navigation}=this.props;
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>欢迎来到Login</Text>
         <Button
           title={''Go App''}
           onPress={()=>{
             navigation.navigate(''App'');
           }}
         />


       </View>
       );
   }
 }

 const styles=StyleSheet.create({
   container:{
     flex:1,
   },
   welcome:{
     fontSize:20,
     textAlign: ''center'',
   }

 });
View Code

 

效果图

 

关于react native navigator 的使用和react native 应用的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于React Native Android Navigator的使用、react native Navigator、react native Navigator使用踩的坑、React Native 之createDrawerNavigator和createSwitchNavigator的相关知识，请在本站寻找。

本文标签：

上一篇使用dva+antd快速构建单页面应用（antd dva）

下一篇react闲谈——JavaScript语法this全解（react中this）

相关文章