GVKun编程网logo

React-native之Navigator调用popToRoute无效解决方案（react native popup）

12

在本文中，我们将带你了解React-native之Navigator调用popToRoute无效解决方案在这篇文章中，我们将为您详细介绍React-native之Navigator调用popToRou

在本文中，我们将带你了解React-native之Navigator调用popToRoute无效解决方案在这篇文章中，我们将为您详细介绍React-native之Navigator调用popToRoute无效解决方案的方方面面，并解答react native popup常见的疑惑，同时我们还将给您一些技巧，以帮助您实现更有效的javascript-React-Navigation 3：使用createBottomTabNavigator和createStackNavigator打开模式、react native Navigator、React Native Navigator被舍弃解决办法、React Native 之 createBottomTabNavigator,createMaterialTopTabNavigator。

本文目录一览：

React-native之Navigator调用popToRoute无效解决方案（react native popup）

React-native之Navigator调用popToRoute无效解决方案（react native popup）

前言

在使用RN过程中， 经常会遇到如下场景， 当前在D页面， 栈里有A =》 B => C => D 四个页面， 我们往往需要返回之前的某个页面（B页面），并卸载 C,D两个页面，此时就需要用到官方定义的popToRouter方法，但是本人尝试了一下无效，

this.props.navigator.popToRoute({name:'login'});

于是查找一番找个了一个方法。

方法

const routes = this.props.navigator.state.routeStack;
                        let destinationRoute = '';
                        for (let i = routes.length - 1; i >= 0; i--) {
                                if(routes[i].name === 'LoginView'){
                                        destinationRoute = this.props.navigator.getCurrentRoutes()[i]
                                        return;
                                }
                        }
                        this.props.navigator.popToRoute(destinationRoute);

主要原理在于，找到栈中所有的页面，调用getCurrentRoutes方法找到对应的路由，再次执行popToRoute即可。

javascript-React-Navigation 3：使用createBottomTabNavigator和createStackNavigator打开模式

javascript-React-Navigation 3：使用createBottomTabNavigator和createStackNavigator打开模式

我知道以前曾问过这个问题,但仅适用于旧版本的反应导航.从那以后,一些事情发生了变化. createBottomTabNavigator使创建底部导航器的速度大大提高,并且功能jumpToIndex()不再存在.

我的问题是如何创建类似于Instagram的底部选项卡,其中第一,第二,第四和第五个导航按钮的行为与通常的选项卡导航器相同,而中间按钮(screen3)将打开模态screen3Modal.

我已经在react-navigation 3.x.x中使用createBottomTabNavigator和createStackNavigator对其进行了尝试.

import React,{ Component,} from 'react';
import { createBottomTabNavigator,createStackNavigator,createAppContainer,} from 'react-navigation';
import { Screen1,Screen2,Screen3,Screen4,Screen5 } from './screens';

const TabNavigator = createBottomTabNavigator({
  screen1: { screen: Screen1,},screen2: { screen: Screen2,screen3: { 
    screen: () => null,navigationoptions: () => ({
      tabBarOnPress: () => this.props.navigation.navigate('screen3Modal')
    })
  },screen4: { screen: Screen4,screen5: { screen: Screen5,});

const StackNavigator = createStackNavigator({
  Home: { screen: TabNavigator },screen3Modal: { screen: Screen3,{
  initialRouteName: 'Home',});

const StackNavigatorContainer = createAppContainer(StackNavigator);

export default class App extends Component {
  render() {
    return <StackNavigatorContainer />;
  }
}

此代码创建选项卡导航和模式导航.可以从另一个屏幕打开模态,但是在选项卡导航器中无法使用.我得到未定义的错误消息不是对象(正在评估“ _this.props.navigation”)

最佳答案
您可以将所有内容包装在同一个StackNavigator中,这样就可以轻松导航到其他路线.在这里,我将screen3作为默认路由传递,但是您可以将其更改为所需的任何值.

import React,screen3: { screen: () => null,//this.props.navigation.navigate('screen3Modal')
  screen4: { screen: Screen4,{
  initialRouteName: 'screen3Modal',});

const StackNavigatorContainer = createAppContainer(StackNavigator);

export default class App extends Component {
  render() {
    return <StackNavigatorContainer />;
  }
}

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 Navigator被舍弃解决办法
Facebook 在 React Native 0.44的时候将Navigator舍弃掉，推荐使用 react-Navigator ，但有一些老的项目已经使用了Navigator就不好迁移到react-Navigator 。所以在这里记录一下解决办法。Facebook 将舍弃组件都放在一个叫react-native-deprecated-custom-components库下，我们只要安装使用就好，以下是具体过程。

1.切换到项目目录，然后执行

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

2.将原本使用Navigator地方的引入 Navigator 模块

import {
     Navigator
 } from 'react-native';

替换成

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

这样就能在 React Native 版本 > 0.43 使用 Navigator

React Native 之 createBottomTabNavigator,createMaterialTopTabNavigator

React Native 之 createBottomTabNavigator,createMaterialTopTabNavigator

icon第三方库
yarn add react-native-vector-icons
react-native link react-native-vector-icons

在上次的代码中添加：

AppNavigators.js

import React from ''react''; //只要在页面中使用了基础组件 都需要导入这句话 不然会报错
import {Button,Platform} from ''react-native'';
import { createStackNavigator,createAppContainer,createBottomTabNavigator,createMaterialTopTabNavigator } 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 Ionicons from ''react-native-vector-icons/Ionicons''

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 AppStackNavigator = createStackNavigator({
    HomePage: {
        screen: HomePage
    },
    Page1: {
        screen: Page1,
        navigationOptions: ({navigation}) => ({
            title: `${navigation.state.params.name}页面名`//动态设置navigationOptions
        })
    },
    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''
      }
    }

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

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

HomePage.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'';
type Props = {};
 export default class HomePage extends Component<Props> {

   //修改Back按钮
   static navigationOptions={
     title:''Home'',
     headerBackTitle:''返回哈哈''
   }
   render(){
     const {navigation}=this.props;

     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>欢迎来到HomePage</Text>

         <Button
           title={''去 Page1''}
           onPress={()=>{
             navigation.navigate(''Page1'',{name:''动态的''});
           }}
         />

         <Button
           title={''去 Page2''}
           onPress={()=>{
             navigation.navigate(''Page2'');
           }}
         />

         <Button
           title={''去 Page3''}
           onPress={()=>{
             navigation.navigate(''Page3'',{name:''Dev iOS''});
           }}
         />

         <Button
           title={''去 Bottom Navigator''}
           onPress={()=>{
             navigation.navigate(''Bottom'');
           }}
         />

         <Button
           title={''去 Top Navigator''}
           onPress={()=>{
             navigation.navigate(''Top'');
           }}
         />

       </View>
       );
   }
 }

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

 });
View Code

效果图

 

https://zamarrowski.github.io/react-ionicons/ 图标网址

https://reactnavigation.org/docs/en/tab-based-navigation.html 导航栏指导文档

 

--------------------------分界线--------------------------

如果AppNavigators.js做如下配置，那么每个Page都能拥有底部切换Bar了 

import React from ''react''; //只要在页面中使用了基础组件 都需要导入这句话 不然会报错
import {Button} from ''react-native'';
import { createStackNavigator,createAppContainer,createBottomTabNavigator } 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 Ionicons from ''react-native-vector-icons/Ionicons''


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}}
         />)
       }
    },
}

);

//HomePage Page1 Page2 这些是页面名，到时候导航器就接收这个参数进行界面跳转
const AppStackNavigator = createStackNavigator({
    HomePage: {
        screen: HomePage
    },
    Page1: {
        screen: AppBottomNavigator,
        navigationOptions: ({navigation}) => ({
            title: `${navigation.state.params.name}页面名`//动态设置navigationOptions
        })
    },
    Page2: {
        screen: AppBottomNavigator,
        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''
      }
    },

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


const App = createAppContainer(AppStackNavigator)
export default App

 

今天关于React-native之Navigator调用popToRoute无效解决方案和react native popup的介绍到此结束，谢谢您的阅读，有关javascript-React-Navigation 3：使用createBottomTabNavigator和createStackNavigator打开模式、react native Navigator、React Native Navigator被舍弃解决办法、React Native 之 createBottomTabNavigator,createMaterialTopTabNavigator等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇react-navite 开发工具（react开发者工具）

下一篇React-Native之禁用Navigator默认的右滑手势返回上一页（react native 左右滑动）

相关文章