完成抽屉实现后，React Native Android应用崩溃了

Question

我实际上正在通过使用react本机导航来进行单页导航，标签导航和抽屉导航。

完成抽屉实现后，单页导航可以正常工作，但是单击登录按钮后，整个应用程序将崩溃。

看看我编写的代码：

app.js：

import { Navigation } from 'react-native-navigation';
import AuthScreen from './src/screens/Auth/Auth';
import SharePlaceScreen from './src/screens/SharePlace/SharePlace';
import FindPlaceScreen from './src/screens/FindPlace/FindPlace';
import SideDrawer from "./src/screens/SideDrawer/SideDrawer";



// register screens

Navigation.registerComponent('example.AuthScreen', () => AuthScreen);
Navigation.registerComponent('example.SharePlaceScreen', () => SharePlaceScreen);
Navigation.registerComponent('example.FindPlaceScreen', () => FindPlaceScreen);
Navigation.registerComponent('example.SideDrawer', () => SideDrawer);


// start a app

Navigation.startSingleScreenApp({
    screen: {
        screen:'example.AuthScreen',
        title:"Login"
    }
})

startMainTab.js

import { Navigation } from 'react-native-navigation';
import {Dimensions} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
const wDim = Dimensions.get('window');
const fixedWidth = Math.round(wDim.width * wDim.scale * 0.8);

const startTab = () =>{
    Promise.all([
        Icon.getImageSource("map",30),
        Icon.getImageSource("share",30),
        Icon.getImageSource("menu",30),

    ]).then(sources =>{
        Navigation.startTabBasedApp({
            tabs: [
                {
                    screen:"example.AuthScreen",
                    label : "Find Place",
                    title : "Find Place",
                    icon  : sources[0],
                    navigatorButtons:{
                        leftButton:[
                            {
                                icon:sources[2],
                                title:"Menu",
                                id:"sideDrawerToggle"
                            }
                        ]

                    }

                },
                {
                    screen:"example.AuthScreen",
                    label : "Share Place",
                    title : "Share Place",
                    icon  : sources[1],
                    navigatorButtons:{
                        leftButton:[
                            {
                                icon:sources[2],
                                title:"Menu",
                                id:"sideDrawerToggle"

                            }
                        ]

                    }

                }
            ],
            drawer: {
                left: {
                    screen:"example.SideDrawer"
                }
            }
        });
    })


}

export default startTab;

SideDrawer.js

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

class SideDrawer extends Component{
    render(){
        return(
            <View >
                <Text
                style={[styles.container,{width:Dimensions.get("window").width*0.8}]}>
                    On SideDrawer
                </Text>
            </View>
        )
    }
}



const styles = StyleSheet.create({
    container:{
        paddingTop:22,
        backgroundColor:"white",
        flex:1
    }
})

export default SideDrawer;

sharePlace.js

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

class SharePlaceScreen extends Component{
    constructor(props){
        super(props);
        props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));

    }

    onNavigatorEvent = event => {
        console.log(events)
        if(event.type === "NavBarButtonPress"){
            if(event.id === "sideDrawerToggle"){
                this.props.navigator.toggleDrawer({
                    side: 'left'
                })
            }

        }
    }

    render(){
        return(
            <View>
                <Text>On Share place screen</Text>
            </View>
        );
    }
}

export default SharePlaceScreen;

Answer 1

Username: test1 AND Password: pass@100

这应该是，

leftButton: [
    {
        icon: sources[2],
        title: "Menu",
        id: "sideDrawerToggle"
    }
]

关注此链接： https://wix.github.io/react-native-navigation/#/adding-buttons-to-the-navigator。 希望这对您有所帮助。 ：）