如何在 React Native 的顶部选项卡导航中转到另一个屏幕

Question

我想退出顶部选项卡导航，但无法导航。 它给出了错误任何导航器都没有处理带有有效载荷 {"name":"LoginPage"} 的操作“导航”。

你有一个名为“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>
 );
}

配置文件数据.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%'),
  },
});

Answer 1

我想退出顶部标签导航，但是它无法导航。 发生错误导航器未处理有效负载为{“ 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%'),
  },
});

Answer 2

React Native：Top Tabs Navigator是屏幕顶部的简单标签栏。 有关详细信息，请访问我的文章 顶部导航器完整代码示例。 您可以在不同的屏幕或路线之间切换。

您可以在这里查看-> https://www.extendfeature.com/react-native-top-tabs-navigator/

//Initialized Top Tab Navigator
const TopTab = createMaterialTopTabNavigator();

自卫队

<TopTab.Navigator initialRouteName="Login">
<TopTab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: 'Home' }} />
<TopTab.Screen name="Login" component={LoginScreen} options={{ tabBarLabel: 'Login' }} />
<TopTab.Screen name="Register" component={RegisterScreen} options={{ tabBarLabel: 'Register' }} />
<TopTab.Screen name="About" component={AboutScreen} options={{ tabBarLabel: 'About' }} />
<TopTab.Screen name="Profile" component={ProfileScreen} options={{ tabBarLabel: 'Profile' }} />
</TopTab.Navigator>