Question

在这个小问题上，您能帮我吗？

我对React本机非常陌生，在这里我正在学习学习React导航。我的问题是，当我尝试从左向右交换时，抽屉导航器不起作用。但是底部导航器正在工作。不知道这怎么了。

也：如果可以的话，请给我发送一个很好的样本来学习这一领域。我有一些样本，但大多数样本都已过时。

MyCode：

CREATE TABLE groovers
(
    user_id         INT AUTO_INCREMENT PRIMARY KEY,
    username        VARCHAR(40)                                                  NOT NULL,
    firstName       VARCHAR(40)                                                  NOT NULL,
    lastName        VARCHAR(40)                                                  NOT NULL,
    gender          enum ('Male', 'Female', 'Unspecified') default 'Unspecified' NOT NULL,
    email           VARCHAR(255)                                                 NOT NULL,
    password        VARCHAR(32)                                                  NOT NULL,
    profileImage    VARCHAR(255)                                                 NOT NULL,
);

Answer 1

好的。经过一段代码和文档的尝试后：https://reactnavigation.org/docs/nesting-navigators/ 并请阅读文档并尝试使用其示例，因为它们具有很好的描述性，可以在小吃上实时执行。

对于问题的第二部分，我为您提供了一个示例：

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
//Import necessary components  



//Create Screens, Dummy screens in this case.
function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}
function Feed ({ navigation, route }) {
 return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text style={{fontSize: 40}}>Feed </Text>
  </View>  
);}

 function Home ({ navigation, route }) {
 return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text style={{fontSize: 40}}> Home </Text>
  </View>  
);}




 // Here is your questions answer, just create a Bottom Navigator  
 // and a Drawer Navigator and nest them in each other after declaring your  
 // screens.

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

function HomeScreen({ navigation }) {
  return (
  <Tab.Navigator>
      //Put your Tab screens here.
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={Feed} />
    </Tab.Navigator>

  );
}


export default function App() {
  return (
    // For the main export create a navigation container and declare the 
    // Drawer Navigator inside the main navigation container, then use that to
    // To Access your Tab navigator "HomeScreen" and put whatever else you 
    // Want in your Drawer Navigator. 
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>


    </NavigationContainer>
  );
}

说明：只允许您在彼此之间而不是在主导航容器内嵌套导航器。

此代码已使用expo-cli 3.18.4进行了测试

反应本机createDrawerNavigator无法正常工作

1 个答案: