我正在使用DrawerNavigator
,我有3页:Router page
,mainScreen
和photos page
,
我制作了一个标题导航栏区域,我使用这个<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
打开主屏幕中的抽屉菜单,并将其用于照片页面,菜单在主屏幕中正常,但是当我在照片页面中单击<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
时,我收到此错误:
我该如何解决这个问题?
我的照片页面:
import React from 'react';
import { Button, ScrollView, View, Text, StyleSheet, TouchableHighlight } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Icon from 'react-native-vector-icons/FontAwesome'
const MyNavScreen = ({ navigation }) => (
<View>
<View style={styles.containerNavbar}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
<Icon name="bars" size={30} color="#fff" />
</TouchableHighlight>
<Text style={styles.navbarTitle}>Photos</Text>
</View>
<ScrollView>
<View><Text>photo</Text></View>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</ScrollView>
</View>
);
const MyPhotosHomeScreen = ({ navigation }) => (
<MyNavScreen navigation={navigation} />
);
MyPhotosHomeScreen.navigationOptions = {
title: 'Photos',
drawerIcon: ({ tintColor }) => (
<MaterialIcons
name="photo"
size={24}
style={{ color: tintColor }}
/>
),
};
export default MyPhotosHomeScreen;
主屏幕:
export default class MainScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Home',
drawerIcon: ({ tintColor }) => (
<MaterialIcons
name="home"
size={24}
style={{ color: tintColor }}
/>
)
};
render() {
return (
<View>
<View style={styles.containerNavbar}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
<Icon name="bars" size={30} color="#fff" />
</TouchableHighlight>
<Text style={styles.navbarTitle}>mainScreen</Text>
</View>
<View>
<View style={styles.containerFooter}>
<Text style={styles.footerTitle}>Footer</Text>
</View>
</View>
</View>
)
}
}
也许我忽略了一些东西,但它看起来像一个简单的Javascript错误。你正在用纯粹的组件MyNavScreen
破坏你的道具:
const MyNavScreen = ({ navigation }) => (
这意味着您无权访问this.props
。你只需要访问destructured prop navigation
。因此,未定义错误的原因确实未定义:
<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
如果你改为直接使用navigation
,它应该工作:
<TouchableHighlight onPress={() => navigation.navigate('DrawerOpen')}>
在mainScreen
上,你很好,因为它不是一个带有破坏性参数的纯粹组件。所以你仍然可以访问this.props
中的render()
。
如果这会给你带来麻烦,你应该刷上destructing。
在我的情况下,当我将this
绑定到在构造函数中调用prop
的方法时它起作用。
constructor(props){
super(props);
this.showDetails = this.showDetails.bind(this);// you should bind this to the method that call the props
}
showDetails(_id){
this.props.navigation.navigate('Details');
}
showDetails = (_id) => {
this.props.navigation.navigate('Details');
}
因为当你使用表达式函数时,它将创建它自己的范围。
如果你在子元素中使用TouchableOpacity / Height,请将它传递给this.props.onPress
,如下所示:
<TouchableOpacity onPress={this.props.onPress}/>
然后调用父组件中的onPress函数,如下所示:
<Parent onPress={this.Handlepress} />
<ChildComponent navigation={this.props.navigation}/>
props.navigation.navigate("ScreenName")
试试这个:
import { withNavigation } from 'react-navigation';
withNavigation
为整个项目/应用程序提供道具,您可以从任何地方访问导航道具。
和
onPress={() => this.props.navigation.navigate('DrawerOpen')}
最后,
export default withNavigation(MyPhotosHomeScreen);
看看这个https://reactnavigation.org/docs/en/connecting-navigation-prop.html
这就是我在React Navigation 2版本中完成它的方法:我从openDrawer()
调用StackNavigator
方法,这是DrawerNavigator
的子导航器。
这是我的DrawerNavigator
:
export const Drawer = DrawerNavigator(
{
MyAccount: {screen: TabsStack},
});
export const TabsStack = StackNavigator({
Tabs: {
screen: Tabs, navigationOptions: ({navigation}) => ({
headerLeft: (
<TouchableOpacity style={{marginLeft: 10, marginTop: 3}}
onPress={() => navigation.openDrawer()}>
<Image source={require('./assets/menu_h.png')}/>
</TouchableOpacity>)
})
当我使用标题组件时,我遇到了同样的问题
现在您可以在其他组件中使用导航变量
<TouchableOpacity onPress={() => { this.props.navigation.navigate("Play");}}>
快乐的Codding :)
功能组件以道具为参数。你应该试试这个
const MyNavScreen = ({props}) =>
然后调用没有此关键字的道具
onPress = {() => props.navigation.navigate('DrawerOpen')}
我遇到了同样的问题。这就是我解决它的方式:
this.props.navigation.navigate
绑定函数,如下所示:this.your_function = this.your_function.bind(this)