Как показать элементы ящика с помощью createDrawerNavigator в реагировать на навигацию 3? - PullRequest
Новая
       13

Как показать элементы ящика с помощью createDrawerNavigator в реагировать на навигацию 3?

0 голосов
/ 05 апреля 2019

В моем родном проекте React я использую одну навигацию по ящику.для этого я создал один класс с именем HomeDrawer.Вот код для этого -

HomeDrawer.js 

import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image, AsyncStorage, ImageBackground} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {
  createAppContainer,
  createStackNavigator,
  createDrawerNavigator,
  createSwitchNavigator
} from "react-navigation";


import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';
import LoginScreen from '../components/LoginScreen';

import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';
import WelcomeScreen from "../WelcomeScreen";

let user_email ='', user_first_name='';

class HomeDrawer extends Component {

  state = {

    loading: true
  }

  static navigationOptions = {
    headerLeft: null
}

  componentDidMount() {
    AsyncStorage.getItem("user_email").then(value => {
      console.log(value);
      // you will need to handle case when `@ProductTour:key` is not exists
     user_email = value;
    });

    AsyncStorage.getItem("user_first_name").then(value => {
      console.log(value);
      // you will need to handle case when `@ProductTour:key` is not exists
     user_first_name = value;
    });

  }

  async componentWillMount() {
    await Font.loadAsync ({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
    });
    this.setState({loading:false});
  }

  render() {
    if(this.state.loading) {
      return(
        <Root>
          <AppLoading/>
        </Root>
      )
    }
    return(
      <MyApp/>
    )

  }
}

const CustomDrawerContentComponent = (props) => (

 <View style={{backgroundColor:"#ffff", height:'100%'}}>

      <ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: 150,  resizeMode:'cover', backgroundColor:"@aaaa"}}>  
      <Body style={styles.drawerBody}>
        <Image
          style={styles.drawerImage}
          source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
        />
        <View style={styles.drawerHeaderText}>
          <Text style={{color:'#ffffff', fontSize:20, fontWeight:'400'}}>{user_email}</Text>
          <Text style={{color:'#ffffff', fontSize:16, fontWeight:'200'}}>{user_first_name}</Text>
        </View>

      </Body>


      </ImageBackground>

      <Content style={{marginTop:30 }}>
      <DrawerItems {...props}/>
    </Content>


  </View>



);

const MyApp = createAppContainer(createDrawerNavigator({
  NoteMeHome:{
    screen: NoteMeHome
  },

  Settings:{
    screen: SettingsScreen
  },



},

{
  initialRouteName: 'NoteMeHome',
  drawerPosition: 'left',
  contentComponent: CustomDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle'
}


));


export default HomeDrawer;

Он отлично работал с реакцией реакции версии 1.0.0-бета.11.Но после обновления до версии 3 появляется следующая ошибка:

1009 * Не удается найти переменную DrawerItem

enter image description here

Если я удаляюотметьте, как показано ниже, код работает, но не показывает никаких элементов в качестве элементов, которые я включаю в DrawerItem. 

  <Content style={{marginTop:30 }}>
  <DrawerItems {...props}/>
   </Content>

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

enter image description here

Теперь я хочу показать элементы ящика назад иудалите отмеченную панель инструментов на втором изображении.Итак, было бы очень хорошо, если бы кто-нибудь помог мне решить проблему с помощью данного кода

Ответы [ 2 ]

1 голос
/ 05 апреля 2019

Я сделаю мою жизнь проще (но не самой легкой ... :), разместив part рабочего примера кода, который работает с реагировать на навигацию 2.18.2.

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

AppNavigator.js (отображается из App.js) 

import React from 'react';
import { createDrawerNavigator } from 'react-navigation';

import WelcomeAuthNavigator from './WelcomeAuthNavigator';
import MainTabNavigator from './MainTabNavigator';
import MainDrawerNavigator from './MainDrawerNavigator';
import Drawer from '../screens/drawers/Drawer';

export default createDrawerNavigator({
    WelcomeAuth: WelcomeAuthNavigator,
    Drawer: MainDrawerNavigator,
    Main: MainTabNavigator
}, {
  initialRouteName: 'WelcomeAuth',
  contentComponent: props => <Drawer {...props} />,
  drawerWidth: 180
});

WelcomeAuthNavigator.js 

import React from 'react';
import { createStackNavigator } from 'react-navigation';

import Welcome from '../screens/welcome/Welcome';
import LoginScreen from '../screens/auth/LoginScreen';
import SignupScreen from '../screens/auth/SignupScreen';

const AuthStack = createStackNavigator({
  Login: { screen: LoginScreen },
  Signup: { screen: SignupScreen }
},  {
    headerMode: 'none',
    initialRouteName: 'Login'
});

const WelcomeAuthNavigator = createStackNavigator({
  Welcome: Welcome,
  Auth: AuthStack
}, {
   headerMode: 'none',
   initialRouteName: 'Welcome',
   contentComponent: props => <Drawer {...props} />
 });

 export default WelcomeAuthNavigator;

MainTabNavigator.js

ContactsStack и PhotosStack определяются с использованием createStackNavigator

const MainTabNavigator = createBottomTabNavigator({
  PhotosStack,
  ContactsStack
}, {
    headerMode: 'none',
    headerStyle: { backgroundColor: '#4C3E54' },
    headerLeft: <Text onPress={() =>
      this.props.navigation.navigate('DrawerOpen')}>Menu</Text>,
    title: 'Welcome!',
    headerTintColor: 'white',
    initialRouteName: 'PhotosStack'
});

export default MainTabNavigator;

MainDrawerNavigator.js 

import { createStackNavigator } from 'react-navigation';

import Help from '../screens/drawers/Help';
import About from '../screens/drawers/About';

const MainDrawerNavigator = createStackNavigator({
  Help: { screen: Help },
  About: { screen: About }
}, {
  initialRouteName: 'About'
});

export default MainDrawerNavigator;

Drawer.js 

import React from "react";
import { SafeAreaView, View } from "react-native";
import { connect } from 'react-redux';
import { Container, Content, Text, List, ListItem, Left, Right,
  Button, Icon, Body, Thumbnail } from "native-base";

const listItems = [
  { title: "Help", route: "Help", icon: "md-help" },
  { title: "About", route: "About", icon: "ios-information-circle-outline" }
];

class Drawer extends React.Component {

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Container>
          <Content contentContainerStyle={{
            justifyContent: 'flex-start', marginTop: 30
            }}>
            {this.renderUserPetDetails.bind(this)()}

            <List
              dataArray={listItems}
              renderRow={data => {
                return (
                  <ListItem onPress={() => this.props.navigation.navigate(data.route)} icon>
                    <Left>
                      <Button onPress={() => this.props.navigation.navigate(data.route)}
                        style={{ backgroundColor: "#888" }}>
                        <Icon active name={data.icon} />
                      </Button>
                    </Left>
                    <Body>
                      <Text
                        style={{ fontSize: 14, fontWeight: '600' }}>
                        {data.title}</Text>
                    </Body>
                  </ListItem>
                );
              }}
            />
          </Content>
        </Container>
      </SafeAreaView>
    );
  }
}
0 голосов
/ 13 мая 2019

Вы пытаетесь вызвать DrawerItems, фактически не импортируя его, следовательно, ошибка.Убедитесь, что вы добавили эту строку:

import { DrawerItems } from 'react-navigation';

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...