Используйте навигацию по ящикам без экрана внутри - PullRequest
Новая
       61

Используйте навигацию по ящикам без экрана внутри

0 голосов
/ 10 февраля 2020

У меня есть следующее stack navigator

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Settings" component={SettingsScreen} />
  <Stack.Screen name="AboutUs" component={AboutUsScreen} />
  <Stack.Screen name="ContactUs" component={ContactUsScreen} />
  <Stack.Screen name="Blog" component={BlogScreen} />
</Stack.Navigator>

Я хочу получить drawer (с пользовательским содержимым ящика) без использования nesting drawer navigators.

1 Ответ

1 голос
/ 10 февраля 2020

Я видел вашу проблему и пытаюсь вам помочь. Я сделал индивидуальный дизайн для компонентов ящика. - во-первых, вы можете создать дополнительный файл для выдвижного ящика, например DrawerComponent.js, и импортировать его в свой код, где вы создаете навигатор выдвижных ящиков. 

import DrawerComponent from "./DrawerComponent";
const Primary_Nav = createDrawerNavigator(
{
  screen1: {
  screen: screen1,
  navigationOptions: {
  drawerLabel: () => null
   }
 },
screen2: {
  screen: screen2,
  navigationOptions: {
    drawerLabel: "detail"
  }
},
 {
 initialRouteName: "screen1",
drawerPosition: "left",
drawerType: "slide",
 contentComponent: DrawerComponent //<<< i added this
}
);

const PrimaryNav = createAppContainer(Primary_Nav);
export default PrimaryNav;

теперь в DrawerComponent.js вы можете сделать содержимое настраиваемого компонента тем, что вам нужно. хочу. 

import React, { Component } from "react";
import { Text, View, TouchableOpacity } from "react- 
native";

export default class DrawerComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {

    };
  }

  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, paddingVertical: 40,paddingHorizontal: 20 }}>
        <TouchableOpacity
          style={{ margin: 20 }}
          onPress={() => navigation.navigate("screen1")}
        >
          <Text>Home</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{ margin: 20 }}
          onPress={() => navigation.navigate("screen2")}
        >
          <Text>Detail</Text>
        </TouchableOpacity>
  </View>
  );
 }
}

Надеюсь, это поможет вам. спасибо и счастливого кодирования.

...