Halo Saya memiliki aplikasi sederhana dan saya ingin menambahkan laci padanya, saya menggunakan navigasi reaksi 4x dan menggunakan react-navigation-drawer untuk mengimplementasikan Laci di aplikasi saya Saya menggunakannya sebelum laci terpisah dalam satu paket dan berfungsi dengan baik tetapi ketika saya menggunakan paket baru saya mendapatkan kesalahan ini

Pelanggaran Invarian: Pelanggaran Invarian: Jenis elemen tidak valid: diharapkan string (untuk komponen bawaan) atau kelas/fungsi (untuk komponen komposit) tetapi mendapat: tidak terdefinisi. Anda mungkin lupa mengekspor komponen Anda dari file yang ditentukan, atau Anda mungkin telah mencampur impor default dan bernama.

Meskipun saya mengekspor layar saya

Di sini adalah Kode

**navigator.js**

    import React from 'react';
    import {TouchableOpacity, View} from 'react-native';
    import Icon from 'react-native-vector-icons';
    import {createAppContainer, createSwitchNavigator} from 'react-navigation';
    import {
      createDrawerNavigator,
      NavigationDrawerStructure,
    } from 'react-navigation-drawer';
    import {createStackNavigator} from 'react-navigation-stack';
    import ForgetPassword from '../screens/ForgetPassword';
    import Home from '../screens/Home';
    import Splash from '../screens/Splash';

    const AuthStackNavigator = createStackNavigator({
      Authloading: {
        screen: Splash,
        navigationOptions: {
          header: null,
        },
      },
    });

    const HomeStack = createStackNavigator({
      HomeScreen: {
        screen: Home,
        navigationOptions: ({navigation}) => ({
          title: 'Home',
          headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
          headerRight: (
            <TouchableOpacity
              onPress={() => navigation.navigate('Notifications')}
              style={{margin: 10}}>
              <Icon name="ios-notifications" size={28} color="#1DA1F2" />
            </TouchableOpacity>
          ),
        }),
      },
    });

    const DrawerNavigator = createDrawerNavigator({
      HomeDrawer: {
        screen: HomeStack,
        navigationOptions: {
          drawerLabel: 'Home',
          drawerIcon: () => <Icon name="ios-home" size={28} color="#0496FF" />,
        },
      },
    });

    const Navigations = createSwitchNavigator({
      // Authloading: Splash,
      Auth: AuthStackNavigator, // the Auth stack
      App: DrawerNavigator, // the App stack,
    });

    const Navigator = createAppContainer(Navigations);

    export default Navigator;


**Home.js**

    //import liraries
    import React, {Component} from 'react';
    import {StyleSheet, Text, View} from 'react-native';

    // create a component
    class Home extends Component {
      render() {
        return (
          <View style={styles.container}>
            <Text>Home</Text>
          </View>
        );
      }
    }


    //make this component available to the app
    export default Home;


**App.js**

    import React, {Component} from 'react';
    import Navigator from './src/navigations/navigator';
    class App extends Component {
      render() {
        return <Navigator />;
      }
    }

    export default App;

Sunting

Saya hanya berpikir NavigationDrawerStructure itu diekspor dari react-native-drawer jadi itu salah saya :)

Jadi di sini adalah nama komponen sebagai NavigationDrawerStructure

//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
  //Structure for the navigatin Drawer
  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity onPress={this.toggleDrawer}>
          <Icon
            name="ios-menu"
            size={40}
            style={{margin: 10}}
            color="#1DA1F2"
          />
        </TouchableOpacity>
      </View>
    );
  }
}

ATAU cukup tambahkan tombol untuk beralih di heder kiri di dalam tumpukan Beranda seperti ini

navigationOptions: ({navigation}) => ({
      title: 'Home',
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
          <Icon
            name="ios-menu"
            size={40}
            style={{margin: 10}}
            color="#1DA1F2"
          />
        </TouchableOpacity>
      )
})
0
Oliver D 29 Oktober 2019, 15:13

1 menjawab

Jawaban Terbaik

Impor tidak valid. itu tidak memiliki objek ini direact-navigation-drawer

import { createDrawerNavigator } from 'react-navigation-drawer';
import NavigationDrawerStructure from 'your file path'

sebagai gantinya

import {
      createDrawerNavigator,
      NavigationDrawerStructure,
    } from 'react-navigation-drawer';
1
hong developer 29 Oktober 2019, 15:48