反应本机自定义抽屉导航

时间:2018-09-06 20:40:14

标签: react-native react-navigation

我已经创建了Custom DrawerNavigator。一切就绪。但是,我无法在屏幕之间导航。我不知道如何导航,因此我按照
https://github.com/kakulgupta/CustomDrawer/tree/master/app上的说明进行操作。但这没有帮助

import React,{Component} from 'react'
import {Text,View,StyleSheet,Image,NavigationActions} from 'react-native'
import {Icon,Container,Header,Content,Left} from 'native-base'

export default class Head extends Component{

        navigateToScreen = (route) =>()=>{
            const navAction = NavigationActions.navigate({
                routeName:route
            })

            this.props.navigation.dispatch(navAction)
        }

        render(){
            return (
                <View>
                    <View style={styles.image}>
                            <Image
                                style={{height:200,
                                                width:90,
                                                marginLeft:'30%',
                                                marginRight:'30%',
                                                marginTop:'15%',
                                                alignContent:'center',
                                                alignItems:'center'
                                            }}
                                source={require('./../images/logo.png')}
                                />

                    </View>
                    <View style={styles.menu}>
                        <View style={styles.box} >
                            <Icon name="person" />
                            <Text style={styles.boxText} onPress={this.navigateToScreen("Login")}>Login</Text>
                        </View>
                    </View>
                </View>
            )
        }
}

我的app.js是

import React, {Component} from 'react';
import {DrawerNavigator} from 'react-navigation'

import Login from './src/Login/login.js'

export default class App extends Component{
    render(){
        return(
            <Links />
            )
    }
}


const Links = DrawerNavigator({
                                Login:{screen:Login},
                            },{contentComponent:props => <Slider {...props}/>
                            })

package.json

  "dependencies": {
    "native-base": "^2.8.0",
    "react": "^16.4.1",
    "react-native": "^0.55.4",
    "react-navigation": "^2.12.1"
  },

错误是

  

未定义不是对象(正在评估   '_reactNative.NavigationActions.navigate')

请帮忙。

1 个答案:

答案 0 :(得分:1)

您从错误的位置导入了NavigationActions,需要从react-navigation导入

import {NavigationActions} from 'react-navigation'