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

【问题标题】：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%'),
  },
});

【问题讨论】：

标签： javascript android ios reactjs react-native

【解决方案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

【讨论】：