Question

我收到一条错误消息，指出“未定义不是对象（正在评估this.props.navigation）”。此错误来自App.js中的代码。我尝试将“ this.props.navigation.navigate”更改为“ navigation.navigate”

App.js中的代码

import { StyleSheet, Text, View, Image } from 'react-native';
import { Button } from 'react-native-elements';





function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to Chat</Text>
      <Image style={styles.image} source={require('./assets/Lolimagememe.png')} />
      <Button title="Let's Discuss" onPress={() => this.props.navigation.navigate('SignIn')}/>
      <Button title="PRIVACY POLICY" type="clear"/>
      <Button title="TERMS OF SERVICE" type="clear"/>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#00BFFF',
    alignItems: 'center',
    justifyContent: 'center',
  },

  text: {
    fontSize: 23,
    color: "white"
  },

  image: {
    height: 100,
    width: 100,
    position: "relative",
    top: -150
  }
});

export default App;

Navigation.js中的代码

import { createStackNavigator, createAppContainer } from "react-navigation";






const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    SignIn: SignInScreen
  },
  {
    initialRouteName: "Home"
  }
);

const AppContainer = createAppContainer(AppNavigator);

export default function Navigation() {
    return(
        <AppContainer/>
    );
}

Answer 1

出现该错误的原因是您尝试使用props关键字访问this，该关键字在功能组件中不起作用，因为props将参数传递给功能组件。

有两种解决方法：

首先使用功能组件，只是通过功能的props参数

function App(props}) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to Chat</Text>
      <Image style={styles.image} source={require('./assets/Lolimagememe.png')} />
      <Button title="Let's Discuss" onPress={() => props.navigation.navigate('SignIn')}/>
      <Button title="PRIVACY POLICY" type="clear"/>
      <Button title="TERMS OF SERVICE" type="clear"/>

    </View>
  );
}

第二种方法是通过这种方式将App功能组件转换为Class，您仍然可以使用this关键字。

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Welcome to Chat</Text>
        <Image style={styles.image} source={require('./assets/Lolimagememe.png')} />
        <Button title="Let's Discuss" onPress={() => this.props.navigation.navigate('SignIn')}/>
        <Button title="PRIVACY POLICY" type="clear"/>
        <Button title="TERMS OF SERVICE" type="clear"/>
      </View>
    )
  }
}

反应导航，未定义不是对象吗？

1 个答案: