如何在本机反应中转到顶部选项卡导航中的另一个屏幕

Posted 2023-02-22

【中文标题】如何在本机反应中转到顶部选项卡导航中的另一个屏幕

【英文标题】：How to go to another screen in top tab navigation in react native

【发布时间】：2021-02-23 15:17:39

【问题描述】：

我想退出顶部标签导航，但无法导航。它给出错误有效载荷 "name":"LoginPage" 的操作“NAVIGATE”未由任何导航器处理。

你有一个名为“LoginPage”的屏幕吗？

如果您尝试导航到嵌套导航器中的屏幕，请参阅https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator

我也使用嵌套导航但不起作用。我的屏幕在下面

顶部标签导航屏幕

import * as React from 'react';
import  Text, View  from 'react-native';
import  NavigationContainer  from '@react-navigation/native';
import  createMaterialTopTabNavigator  from '@react-navigation/material-top-tabs';
import widthPercentageToDP as wp, heightPercentageToDP as hp from 'react-native-responsive-screen';
import ProfileData from './profiledata';
import ProfileLikeData from './profilelikedata';
import Fontisto from 'react-native-vector-icons/Fontisto';


const Tab = createMaterialTopTabNavigator();

export default function App() 
 return (
   <NavigationContainer>
     <Tab.Navigator
      screenOptions=( route ) => (
       tabBarIcon: ( focused, color ) => 
         let iconName;
         let size;

         if (route.name === 'Data') 
           iconName = focused
             ? 'nav-icon-grid'
             : 'nav-icon-grid';
           size = focused
           ? 25
           : 25; 
          else if (route.name === 'Like') 
           iconName = focused ? 'heart' : 'heart';
           size = focused
           ? 20
           : 20; 
         
         return <Fontisto name=iconName size=size color=color />;
       ,
     )
       tabBarOptions=
         activeTintColor: '#d40786',
         inactiveTintColor: 'white',
         showIcon:true,
         showLabel:false,
         indicatorStyle: 
           width: 0, height: 0, elevation: 0,      
         ,
         tabStyle:  width: wp('52%'),borderRightWidth:1,borderColor:'white' ,
         style:  backgroundColor:'trasparent',borderTopWidth:0.5,borderColor:'white',paddingBottom:5 ,
       
     >
       <Tab.Screen name="Data" component=ProfileData />
       <Tab.Screen name="Like" component=ProfileLikeData />
     </Tab.Navigator>
   </NavigationContainer>
 );

profiledata.js

import React from 'react';
import  View, StyleSheet, Text,ImageBackground,TouchableOpacity,Image  from 'react-native';
import  FlatGrid  from 'react-native-super-grid';
import widthPercentageToDP as wp, heightPercentageToDP as hp from 'react-native-responsive-screen';
import  RFPercentage, RFValue  from "react-native-responsive-fontsize";
import Toast from 'react-native-simple-toast';

export default class ProfileData extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
          videos:[],
          loginid:'',
          paused:true,
        ;
      

    static navigationOptions = 
      headerShown: false,
    ;

   

 
  render() 
    const  navigate  = this.props.navigation;
    return (
      <View style=styles.container>
        <FlatGrid
          data=this.state.videos
          spacing=0
          renderItem=( item ) => (
            <TouchableOpacity onPress=()=>navigate('LoginPage') style=flex:1>
            // some data
            </TouchableOpacity>
      )
    />
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex:1,
    // paddingHorizontal:wp('2%'),
    backgroundColor:'black',
    height: hp('100%'),
  ,
);

【参考方案1】：

您应该创建另一个包含您的登录屏幕的堆栈，或者在选项卡导航器中添加登录屏幕。 首先在你的 app.js 中做这样的事情

import  createStackNavigator  from '@react-navigation/stack';
import LoginScreen from './LoginScreen';  //Just import the login screen

const AuthStack = createStackNavigator();
const AuthStackScreen = () => (
  <AuthStack.Navigator>
    <AuthStack.Screen
      name="LoginPage"
      component=LoginScreen
    />
  </AuthStack.Navigator>
);

//Then in your profiledata.js;

<TouchableOpacity onPress=()=>navigate('LoginPage') style=flex:1>
            // some data
</TouchableOpacity>

对于第二个选项，只需在选项卡导航器中添加登录屏幕即可；

<Tab.Screen name="Data" component=ProfileData />
<Tab.Screen name="Like" component=ProfileLikeData />
<Tab.Screen name="LoginPage" component=LoginScreen /> //Don't forget to import it