在本文中，我们将详细介绍react-nativenavigator的各个方面，同时，我们也将为您带来关于reactnativeNavigator、reactnativenavigator的使用、Rea
在本文中，我们将详细介绍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
在andoid 我们知道，若想要跳转到某一页面我们可以通过intent 来实现，但在react-native中我们就要抛开原有的一切知识来学了，因为它是通过navigtor 来实现的，那么首先我们来看看官网给我们带来的例子吧
此处给了我们一个navigtor最简单的使用方法，
一般我们在初始化一个navigtor对象时，我们需要给它初始化两个参数值，一个是initialRoute，另一个是renderScene
initialRoute：类似语类的初始化，你需要给他传递参数，来传递给相应的renderScence
renderScene:顾名思义，就是渲染的场景，组件，会接收两个参数，一个是route，另一个是navigtor，其中route传过来的就是initialRoute里面的title和index
那么我们一般怎么使用它呢？
一般我们在渲染组件的时候，会把这些组件单独放进一个路由里，这样做的好处是我们可以对这些组件进行统一的管理
如下是一个路由的代码：
'use strict';
import React from 'react';
/**
* 所有 component 整个框架内只有此处引入
* navigator 统一进行路由显示
* 将全部 component 的引用从老式的层级式改为统一入口的扁平式
*/
import Homepage from './View/Homepage';
import Detailmessage from './View/DetailMessage';
/*
* 路由配置项
* 可配置默认参数 props: params ，配合 this.props 的限制可使代码更严谨
* component 默认和 key 、component 文件夹名称一致，首字母大写，component 文件夹内强制 index.js 为入口文件
*/
const RouteMap = {
'homepage': {index: 0,component: Homepage,params: {}},'detailmessage': {index: 1,component: Detailmessage,params: {}}
};
export default class Route {
/**
* 获取 ID 对应的 Component
* @param {any} id 页面的 ID
* 有严格的映射关系，会根据传入 ID 同名的文件夹去取路由对应的页面
* @param {any} params Component 用到的参数
*/
static getRoutePage (route,navigator) {
let id = route.id,params = route.params,routeObj = RouteMap[id],Component;
if (routeObj) {
Component = routeObj.component;
//合并默认参数
Object.assign(params,routeObj.params);
} else {
Component = Error;
params = {message: '当前页面没有找到：' + id};
}
return <Component navigator={navigator} {...params} />;
}
}在这个代码区域我们可以清晰的看到我们的那些组件会被显示出来，还有主页面的代码
<Navigator
style={{paddingTop:55,backgroundColor:'#FFFFFF'}}
initialRoute={{
id: 'homepage',params: {}
}}
ref={(navigator) => { !this.state.navigator ? this.setNavigator(navigator) : null }}
navigationBar={<Toolbar onIconPress={drawer.openDrawer} />}
configureScene={this.configureScene}
renderScene={this._renderRoute.bind(this)}
/>
}虽然navigtor为我们提供了很多的方法来跳转页面，但最常用的还是，navigtor.push和navigtor.popup.
我们来看一下homepage的跳转方式
import React,{ Component } from 'react';
import {
Text,View,PropTypes,TouchableHighlight
} from 'react-native';
import CarView from './../Component/CarView'
export default class Homepage extends Component {
constructor(props){
super(props);
}
_onPressButton(){
this.props.navigator.push({
id: 'detailmessage',params: {
}
});
}
render(){
return(
<View>
<TouchableHighlight onPress={this._onPressButton.bind(this)}>
<View>
<CarView/>
</View>
</TouchableHighlight>
</View>
)
}
}
这里我们可以清楚的知道他有一个方法可用于点击跳转，对了，还有一件重要的事情，就是在configureSence里面要注意，如果想取消页面点击跳到另一页面，使页面不能左滑返回回上一页面就必须在configureSence中将这样配置：
configureScene(route,routeStack) {
var conf = Navigator.SceneConfigs.HorizontalSwipeJump;
conf.gestures = null;
// if (route.type == 'Modal') {
// return Navigator.SceneConfigs.FloatFromBottom;
// }
// return Navigator.SceneConfigs.PushFromright;
return conf;
}
navigtor的用法暂且就讲解那么多：
点击
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 (
<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 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
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'',
}
});
效果图
关于react-native navigator的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于react native Navigator、react native navigator 的使用、React Native Paper Provider 和 React Navigation NavigationContainer 在 React Native Web 中导致错误、React Native 之createDrawerNavigator和createSwitchNavigator的相关信息，请在本站寻找。
本文标签：
