Question

我正在尝试制作我的第一个React Native Android应用，我收到此错误：

undefined不是一个对象（评估＆＃39; this.props.navigation.navigate＆＃39;）

这是代码：

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends React.Component {

  static navigationOptions = {
    title: 'Home',
  };

  render() {
    const { navigate } = this.props.navigation;    

    return (
      <View>
        <Button 
          title="Show Centers near me"
          onPress={() =>
            navigate('Results', "Search Term")
          }
          />
        <Text>or</Text>
      </View>
    );
  }
}


class ResultsScreen extends React.Component {

  static navigationOptions = {
    title: 'Results',
  };


  render() {
  const { navigate } = this.props.navigation;

    return (
      <View>
        <Text>Hi</Text>
      </View>
    );
  }
}

const App = StackNavigator({
  Home: { screen: HomeScreen },
  Results: { screen: ResultsScreen }
});

我无法弄清楚错误即将发生的原因。

Answer 1

您导出的组件错误。您应该删除export default定义上的class HomeScreen，并在文件底部执行export default App;

Answer 2

如果您在AppContainer中处理它，并且在打开抽屉菜单时无法访问。您可以尝试以下摘录。

const HomeStackNavigator = createStackNavigator({   Home:    { 
    screen: Home,
    navigationOptions : ({navigation}) => ({
      title: 'Home',
      headerStyle: {
          backgroundColor: "#512DA8"
      },
      headerTitleStyle: {
          color: "#fff"            
      },
      headerTintColor: "#fff",
      headerLeft: <TouchableOpacity onPress={ () => navigation.openDrawer()}> 
      <Image 
      source={require('./images/menu_burger.png')}
      style={{width: 24, height: 24, padding: 5, marginLeft: 5}}/>
      </TouchableOpacity>
    })   } }, {   initialRouteName: 'DumontHome' })

Answer 3

不使用“搜索字词”或以这种方式尝试：

navigate('route', {item:'search term'})

undefined不是一个对象（评估＆＃39; this.props.navigation.navigate＆＃39;） - React Native

3 个答案: