React Native[Navigator]

25-03-01 10

本文将介绍ReactNative[Navigator]的详细情况，。我们将通过案例分析、数据研究等多种方式，帮助您更全面地了解这个主题，同时也将涉及一些关于reactnativeNavigator、r

本文将介绍React Native[Navigator]的详细情况，。我们将通过案例分析、数据研究等多种方式，帮助您更全面地了解这个主题，同时也将涉及一些关于react native Navigator、react native navigator 的使用、React Native Paper Provider 和 React Navigation NavigationContainer 在 React Native Web 中导致错误、React Native 之createDrawerNavigator和createSwitchNavigator的知识。

本文目录一览：

React Native[Navigator]
react native Navigator
react native navigator 的使用
React Native Paper Provider 和 React Navigation NavigationContainer 在 React Native Web 中导致错误
React Native 之createDrawerNavigator和createSwitchNavigator

React Native[Navigator]

转自:
http://bbs.reactnative.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B

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 的使用

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 (

<TouchableOpacity

style={styles.button}

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

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

</Text>

</TouchableOpacity>

<TouchableOpacity

style={styles.button}

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

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

</Text>

</TouchableOpacity>

</View>

);

}

/**

* 第二页

class SecondPage extends Component {

nextPageOnpress = ()=>{

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

this.props.navigator.push({

component:SecondPage,

passprops: {

id: '临时第yi页'

}

})

}

render() {

return (

<TouchableOpacity

style={styles.button}

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

返回上一页,来源: {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>

</TouchableOpacity>

</View>

);

}

class ThirdPage extends Component {

render() {

return (

<TouchableOpacity

style={styles.button}

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

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

</Text>

</TouchableOpacity>

</View>

);

}

// 导航栏的Mapper

var NavigationBarRouteMapper = {

// 左键

LeftButton(route,navigator,index,navstate){

if (index > 0) {

return (

<TouchableOpacity

underlayColor='transparent'

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

Back

</Text>

</TouchableOpacity>

</View>

);

} else {

return null;

}

// 右键

RightButton(route,navstate) {

if (route.onPress)

return (

<TouchableOpacity

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

{route.rightText || '右键'}

</Text>

</TouchableOpacity>

</View>

);

// 标题

Title(route,navstate){

return (

{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 Paper Provider 和 React Navigation NavigationContainer 在 React Native Web 中导致错误

如何解决React Native Paper Provider 和 React Navigation NavigationContainer 在 React Native Web 中导致错误？

我是 React-native 和 React-native-web 的初学者。我目前正在处理一个使用 React-Native-paper 和 @react-navigation/native 库的现有项目。我正在尝试使用现有代码/项目作为 Web 应用程序运行。但是当我在 App.js 中使用以下代码时，我在运行 Web 应用程序的控制台中收到一个错误：

import React from ''react'';
import {Provider} from ''react-native-paper'';
import {NavigationContainer} from ''@react-navigation/native'';

export const App = props => {
    return (
        <NavigationContainer>
            <Provider>
                <Navigator />
            </Provider>
        </NavigationContainer>
    );
};

我得到的错误是：

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
    at AppContainer (webpack://web_tester/./node_modules/react-native-web/dist/exports/AppRegistry/AppContainer.js?:22:24)

react-dom.development.js:14906 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This Could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (VM231 react-dom.development.js:14906)
    at Object.useContext (VM227 react.development.js:1504)
    at eval (VM252 index.js:83)
    at renderWithHooks (VM231 react-dom.development.js:14985)
    at updateForwardRef (VM231 react-dom.development.js:17044)
    at beginWork (VM231 react-dom.development.js:19098)
    at HTMLUnkNownElement.callCallback (VM231 react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (VM231 react-dom.development.js:3994)
    at invokeGuardedCallback (VM231 react-dom.development.js:4056)
    at beginWork$1 (VM231 react-dom.development.js:23959)

我创建了一个包含错误的简单 git repository。请看一下。

任何其他方面的见解都会有所帮助。并提前致谢。

解决方法

尝试将 react-native-paper 提供程序放在外面。我的应用使用以下代码使用 react-native 和 react-native-web 工作正常。

我已经通过 Expo which is the recommended way 设置了 react-native-web：引用自 react-native-web 文档：“通常建议您使用 Expo。”

<PaperProvider theme={theme} settings={settings}>
  <NavigationContainer>
    <RootStackScreens />
  </NavigationContainer>
</PaperProvider>

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

/**
 * 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 Navigator、react native navigator 的使用、React Native Paper Provider 和 React Navigation NavigationContainer 在 React Native Web 中导致错误、React Native 之createDrawerNavigator和createSwitchNavigator等相关知识，可以在本站进行查询。

本文标签：