Android 使用抽屉导航器时未定义this.props.navigator
我正在将Android 使用抽屉导航器时未定义this.props.navigator,android,react-native,react-native-android,react-navigation,Android,React Native,React Native Android,React Navigation,我正在将'react-navigation'的DrawerNavigator作为文档集成到我的项目中。但是,当我运行项目时,单击按钮时总是会出现以下错误: TypeError:undefined不是对象(正在评估) 'this.props.navigation.navigate') 当我从左向右滑动时,什么也没发生,抽屉也没打开 我已经检查了这个.props,控制台中的日志总是空的{}。 我尝试了许多解决方案,但仍然不起作用 calculator.js export default class
'react-navigation'
的DrawerNavigator作为文档集成到我的项目中。但是,当我运行项目时,单击按钮时总是会出现以下错误:
TypeError:undefined不是对象(正在评估)
'this.props.navigation.navigate')
当我从左向右滑动时,什么也没发生,抽屉也没打开
我已经检查了这个.props
,控制台中的日志总是空的{}
。
我尝试了许多解决方案,但仍然不起作用
calculator.js
export default class Calculator extends Component {
constructor(props) {
super(props);
}
static navigationOptions = {
drawerLabel: 'Calculator',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./../../res/images/icon_calculator.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<View style={styles.container}>
<View>
<Text style={styles.title}>Tip Calculator</Text>
</View>
<Button
onPress={() => this.props.navigation.navigate("SettingsScreen")}
title="Go to settings"
/>
</View>
);
}
}
module.exports = Calculator;
export default class Settings extends Component {
constructor(props) {
super(props);
}
static navigationOptions = {
drawerLabel: 'Settings',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./../../res/images/icon_settings.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<View style={styles.container}>
<Text>Settings</Text>
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
</View>
);
}
}
module.exports = Settings;
import {
DrawerNavigator
} from 'react-navigation';
import Calculator from './../components/calculator/calculator.js';
import Settings from './../components/settings/settings.js';
const RootDrawer = DrawerNavigator({
CalculatorScreen: {
path: '/',
screen: Calculator
},
SettingsScreen: {
path: '/sent',
screen: Settings
}
}, {
initialRouteName: 'CalculatorScreen',
drawerPosition: 'left'
});
export default RootDrawer;
export default class App extends Component<{}> {
render() {
return (
<Calculator/>
);
}
}
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('rn_tip_calculator', () => App);
App.js
export default class Calculator extends Component {
constructor(props) {
super(props);
}
static navigationOptions = {
drawerLabel: 'Calculator',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./../../res/images/icon_calculator.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<View style={styles.container}>
<View>
<Text style={styles.title}>Tip Calculator</Text>
</View>
<Button
onPress={() => this.props.navigation.navigate("SettingsScreen")}
title="Go to settings"
/>
</View>
);
}
}
module.exports = Calculator;
export default class Settings extends Component {
constructor(props) {
super(props);
}
static navigationOptions = {
drawerLabel: 'Settings',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./../../res/images/icon_settings.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<View style={styles.container}>
<Text>Settings</Text>
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
</View>
);
}
}
module.exports = Settings;
import {
DrawerNavigator
} from 'react-navigation';
import Calculator from './../components/calculator/calculator.js';
import Settings from './../components/settings/settings.js';
const RootDrawer = DrawerNavigator({
CalculatorScreen: {
path: '/',
screen: Calculator
},
SettingsScreen: {
path: '/sent',
screen: Settings
}
}, {
initialRouteName: 'CalculatorScreen',
drawerPosition: 'left'
});
export default RootDrawer;
export default class App extends Component<{}> {
render() {
return (
<Calculator/>
);
}
}
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('rn_tip_calculator', () => App);
我是否必须将StackNavigator
与DrawerNavigator
一起使用,或者我在配置中遗漏了什么
完整的源代码,这只是一个简单的示例项目,请查看:
任何帮助都将不胜感激。谢谢 您可以使用分派api
1) 导入导航操作
import { NavigationActions } from 'react-navigation'
2) 调度导航操作:
const navigateAction = NavigationActions.navigate({
routeName: 'SettingsScreen',
params: {},
})
this.props.navigation.dispatch(navigateAction)
您可以使用分派api
1) 导入导航操作
import { NavigationActions } from 'react-navigation'
2) 调度导航操作:
const navigateAction = NavigationActions.navigate({
routeName: 'SettingsScreen',
params: {},
})
this.props.navigation.dispatch(navigateAction)
我是个新来的土生土长的人,但有时这种情况也会发生在我身上 我正在使用Redux和堆栈导航器。。。。但这是我的工作示例
import { StackNavigator } from 'react-navigation'
import { Animated, Easing } from 'react-native'
import LoginScreen from '../Containers/LoginScreen'
import LaunchScreen from '../Containers/LaunchScreen'
import HomeScreen from '../Containers/HomeScreen'
import SignUpScreen from '../Containers/SignUpScreen'
import SettingsScreen from '../Containers/SettingsScreen'
import VehicleCreateScreen from '../Containers/VehicleCreateScreen'
import styles from './Styles/NavigationStyles'
// Manifest of possible screens
const PrimaryNav = StackNavigator({
LoginScreen: { screen: LoginScreen },
LaunchScreen: { screen: LaunchScreen },
HomeScreen: { screen: HomeScreen },
SignUpScreen: { screen: SignUpScreen },
SettingsScreen: { screen: SettingsScreen },
VehicleCreateScreen: { screen: VehicleCreateScreen }
}, {
// Default config for all screens
headerMode: 'none',
initialRouteName: 'LaunchScreen',
navigationOptions: {
headerStyle: styles.header
},
transitionSpec: {
duration: 0,
timing: Animated.timing,
easing: Easing.step0,
},
},
)
export default PrimaryNav
然后从未连接到REDUX的组件
import React, { Component } from 'react';
import { Container, Content, List, ListItem, Icon, Text, Button, Left, Right, Badge } from 'native-base';
import { Image } from 'react-native'
import styles from './Styles/SideBarStyle';
// import backgroundImage from '../Images/vw.jpg'
const backgroundImage = require("../Images/vw.jpg");
const drawerImage = require("../Images/dirtyHandsDark.jpg");
export default class SideBar extends Component {
constructor(props) {
super(props);
}
render() {
// *********** HERE WE DECLARE AN ARRAY TO RENDER LISTS FROM. THIS COULD ALSO BE LIST OF BIKES FROM STORE.. ***********
const datas = [
{
name: "Home",
route: "HomeScreen",
icon: "settings",
bg: "#C5F442",
},
{
name: "Repair",
route: "HomeScreen",
icon: "settings",
bg: "#C5F442",
},
{
name: "My Profile",
route: "SettingsScreen",
icon: "settings",
bg: "#C5F442",
},
];
return (
<Container>
<Content bounces={false} style={{ flex: 1, backgroundColor: "#fff", top: -1 }}>
<Image source={backgroundImage} style={styles.drawerCover}>
<Image square style={styles.drawerImage} source={drawerImage} />
</Image>
<List
dataArray={datas}
renderRow={data =>
// *********** CREATE NEW LIST ITEM ON CLICK NAVIGATE TO APPROPRIATE LISTITEM.SCREEN ***********
<ListItem button noBorder onPress={() => this.props.navigation.navigate(data.route)}>
<Left>
<Icon active name={data.icon} style={{ color: "#777", fontSize: 26, width: 30 }} />
<Text style={styles.text}>
{data.name}
</Text>
</Left>
{data.types &&
<Right style={{ flex: 1 }}>
<Badge
style={{
borderRadius: 3,
height: 25,
width: 72,
backgroundColor: data.bg,
}}
>
<Text style={styles.badgeText}>{`${data.types} Types`}</Text>
</Badge>
</Right>}
</ListItem>}
/>
</Content>
</Container>
);
}
}
import React,{Component}来自'React';
从“本机基础”导入{容器、内容、列表、列表项、图标、文本、按钮、左、右、徽章};
从“react native”导入{Image}
从“./styles/SideBarStyle”导入样式;
//从“../Images/vw.jpg”导入背景图像
const backgroundImage=require(“../Images/vw.jpg”);
const drawerImage=require(“../Images/dirtyHandsDark.jpg”);
导出默认类边栏扩展组件{
建造师(道具){
超级(道具);
}
render(){
//**********这里我们声明一个数组来呈现列表。这也可以是商店中的自行车列表***********
常数数据=[
{
姓名:“家”,
路线:“主屏幕”,
图标:“设置”,
背景:“C5F442”,
},
{
名称:“修复”,
路线:“主屏幕”,
图标:“设置”,
背景:“C5F442”,
},
{
姓名:“我的个人资料”,
路线:“设置屏幕”,
图标:“设置”,
背景:“C5F442”,
},
];
返回(
//**********单击“导航到相应的LISTITEM.SCREEN”创建新列表项***********
this.props.navigation.navigate(data.route)}>
{data.name}
{data.types&&
{`${data.types}types`}
}
}
/>
);
}
}
你可以看到我引用了这个.props.navigation.navigate没有问题。
这是我的回购协议供参考。
我是个新手,不会做出本地反应,但有时这种情况也会发生在我身上 我正在使用Redux和堆栈导航器。。。。但这是我的工作示例
import { StackNavigator } from 'react-navigation'
import { Animated, Easing } from 'react-native'
import LoginScreen from '../Containers/LoginScreen'
import LaunchScreen from '../Containers/LaunchScreen'
import HomeScreen from '../Containers/HomeScreen'
import SignUpScreen from '../Containers/SignUpScreen'
import SettingsScreen from '../Containers/SettingsScreen'
import VehicleCreateScreen from '../Containers/VehicleCreateScreen'
import styles from './Styles/NavigationStyles'
// Manifest of possible screens
const PrimaryNav = StackNavigator({
LoginScreen: { screen: LoginScreen },
LaunchScreen: { screen: LaunchScreen },
HomeScreen: { screen: HomeScreen },
SignUpScreen: { screen: SignUpScreen },
SettingsScreen: { screen: SettingsScreen },
VehicleCreateScreen: { screen: VehicleCreateScreen }
}, {
// Default config for all screens
headerMode: 'none',
initialRouteName: 'LaunchScreen',
navigationOptions: {
headerStyle: styles.header
},
transitionSpec: {
duration: 0,
timing: Animated.timing,
easing: Easing.step0,
},
},
)
export default PrimaryNav
然后从未连接到REDUX的组件
import React, { Component } from 'react';
import { Container, Content, List, ListItem, Icon, Text, Button, Left, Right, Badge } from 'native-base';
import { Image } from 'react-native'
import styles from './Styles/SideBarStyle';
// import backgroundImage from '../Images/vw.jpg'
const backgroundImage = require("../Images/vw.jpg");
const drawerImage = require("../Images/dirtyHandsDark.jpg");
export default class SideBar extends Component {
constructor(props) {
super(props);
}
render() {
// *********** HERE WE DECLARE AN ARRAY TO RENDER LISTS FROM. THIS COULD ALSO BE LIST OF BIKES FROM STORE.. ***********
const datas = [
{
name: "Home",
route: "HomeScreen",
icon: "settings",
bg: "#C5F442",
},
{
name: "Repair",
route: "HomeScreen",
icon: "settings",
bg: "#C5F442",
},
{
name: "My Profile",
route: "SettingsScreen",
icon: "settings",
bg: "#C5F442",
},
];
return (
<Container>
<Content bounces={false} style={{ flex: 1, backgroundColor: "#fff", top: -1 }}>
<Image source={backgroundImage} style={styles.drawerCover}>
<Image square style={styles.drawerImage} source={drawerImage} />
</Image>
<List
dataArray={datas}
renderRow={data =>
// *********** CREATE NEW LIST ITEM ON CLICK NAVIGATE TO APPROPRIATE LISTITEM.SCREEN ***********
<ListItem button noBorder onPress={() => this.props.navigation.navigate(data.route)}>
<Left>
<Icon active name={data.icon} style={{ color: "#777", fontSize: 26, width: 30 }} />
<Text style={styles.text}>
{data.name}
</Text>
</Left>
{data.types &&
<Right style={{ flex: 1 }}>
<Badge
style={{
borderRadius: 3,
height: 25,
width: 72,
backgroundColor: data.bg,
}}
>
<Text style={styles.badgeText}>{`${data.types} Types`}</Text>
</Badge>
</Right>}
</ListItem>}
/>
</Content>
</Container>
);
}
}
import React,{Component}来自'React';
从“本机基础”导入{容器、内容、列表、列表项、图标、文本、按钮、左、右、徽章};
从“react native”导入{Image}
从“./styles/SideBarStyle”导入样式;
//从“../Images/vw.jpg”导入背景图像
const backgroundImage=require(“../Images/vw.jpg”);
const drawerImage=require(“../Images/dirtyHandsDark.jpg”);
导出默认类边栏扩展组件{
建造师(道具){
超级(道具);
}
render(){
//**********这里我们声明一个数组来呈现列表。这也可以是商店中的自行车列表***********
常数数据=[
{
姓名:“家”,
路线:“主屏幕”,
图标:“设置”,
背景:“C5F442”,
},
{
名称:“修复”,
路线:“主屏幕”,
图标:“设置”,
背景:“C5F442”,
},
{
姓名:“我的个人资料”,
路线:“设置屏幕”,
图标:“设置”,
背景:“C5F442”,
},
];
返回(
//**********单击“导航到相应的LISTITEM.SCREEN”创建新列表项***********
this.props.navigation.navigate(data.route)}>
{data.name}
{data.types&&
{`${data.types}types`}
}
}
/>
);
}
}
你可以看到我引用了这个.props.navigation.navigate没有问题。
这是我的回购协议供参考。
发生这种情况是因为我不知道