[英]undefined is not an object (evaluating '_this2.props.navigation.navigate') - React Native
I really can't get my navigation to work.I am using react-navigation (StackNavigator).我真的无法让我的导航工作。我正在使用 react-navigation (StackNavigator)。
This is my structure: http://i.imgur.com/IKExx9g.png这是我的结构: http : //i.imgur.com/IKExx9g.png
My navigation works in HomeScreen.js
: I navigate from HomeScreen.js
to NewScreen.js
without problems.我的导航在
HomeScreen.js
:我从HomeScreen.js
导航到NewScreen.js
没有问题。
App.js:应用程序.js:
import React from 'react';
import {
StatusBar, AppRegistry
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import {HomeScreen} from './screens/HomeScreen';
import AboutScreen from "./screens/AboutScreen";
import NewScreen from "./screens/NewScreen";
import CalendarScreen from "./screens/CalendarScreen";
import AddAgendaScreen from "./screens/AddAgendaScreen";
const SimpleApp = StackNavigator({
Home: {screen: HomeScreen},
About: {screen: AboutScreen},
New: {screen: NewScreen},
Calendar: {screen: CalendarScreen},
AddAgenda: {screen: AddAgendaScreen}
});
console.disableYellowBox = true;
StatusBar.setHidden(true);
export default SimpleApp; // Export root navigator as the root component
Homescreen.js (working): Homescreen.js(工作):
export class HomeScreen extends React.Component {
static navigationOptions = ({navigation}) => {
const {state, navigate} = navigation;
return {
title: 'eXopera'
};
};
constructor() {
super();
this.state = {
address: [],
refreshing: false,
page: 1,
lastPage: 1,
loading: true,
listOpacity: 0,
};
}
render() {
return (
<ScrollableTabView style={{backgroundColor: '#fff'}} renderTabBar={() => <DefaultTabBar />}>
<View style={{flex: 1, backgroundColor: '#fff'}} tabLabel="Adressen">
<Button color="#33cd5f" title="NEW"
onPress={() => this.props.navigation.navigate('New') }/>
</View>
</ScrollableTabView>
);
}
}
Then there is another component called CalendarScreen.js (where I also try to navigate to NewScreen.js), even if I completely copy and paste the code from HomeScreen.js, I am unable to navigate.然后还有另一个名为 CalendarScreen.js 的组件(我也在其中尝试导航到 NewScreen.js),即使我完全复制并粘贴 HomeScreen.js 中的代码,我也无法导航。 It always gives me " undefined is not an object (evaluating '_this2.props.navigation.navigate') ".
它总是给我“未定义不是一个对象(评估'_this2.props.navigation.navigate') ”。
I really don't know what I can do now.. Have been struggling with this for hours.我真的不知道我现在能做什么..已经为此苦苦挣扎了几个小时。
Thanks in advance!提前致谢!
Apart from react-navigation, I was also using react-native-scrollable-tab-view .除了 react-navigation 之外,我还使用了react-native-scrollable-tab-view 。
I have solved it by passing the navigation props through the tab navigation:我已经通过标签导航传递导航道具解决了这个问题:
<CalendarScreen navigation={this.props.navigation} tabLabel="Agenda"/>
Then you can access it in the other components as this.props.navigation
as well.然后你也可以在其他组件中以
this.props.navigation
形式访问它。
I changed my method from renderHeader(){ ... }
to我将我的方法从
renderHeader(){ ... }
更改为
renderHeader = () => {
const title= 'Sign Up';
return (
<View style={{
padding: 20,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
}}>
<Icon
onPress={() => {
this.props.navigation.navigate('find');
}
}
name='arrow-back'
type='MaterialIcons'
color='white'
/>
</View>
);
}
it solved this problem.它解决了这个问题。
use renderHeader = () => {} instead of using renderHeader(){} is critically important in solving my issue.
使用 renderHeader = () => {} 而不是使用 renderHeader(){} 对解决我的问题至关重要。
It sounds like your new screen is not registered with the app navigator and so doesn't have the navigation
props.听起来您的新屏幕未在应用程序导航器中注册,因此没有
navigation
道具。 Your constructor should be like this:你的构造函数应该是这样的:
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
New: { screen: NewScreen }, // Add this
});
我正在使用替换并将其更改为导航并开始工作。
Guys don't give bullsh*t answers, main thing is you need to give permission to access props
to child component .伙计们不要给出废话* t的答案,主要是您需要授予访问子组件
props
权限。 slution => Access the navigation prop from any component解决方案 =>从任何组件访问导航道具
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.