更改屏幕FlatList onPress

Question

我有两个屏幕。第一个屏幕是HomeScreen，第二个屏幕是ProfileScreen。我在HomeScreen上使用了FlatList，我想推送导航到另一个屏幕。但是当我使用这些代码时，我看到了错误消息："Can‘t read property 'navigate’of undefined“

像这样的代码

class ProfileScreen extends Component {

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

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

        return <Text>Hello, I am profile!</Text>;
    }
 }




class HomeScreen extends Component {

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


    constructor(props) {
        super(props);

        this.state = {
            data: [],

        };


    }

    getScreen() {
        this.props.navigation.navigate('Profile')
    }

    render() {

        return (
            <View>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => (
                        <TouchableHighlight underlayColor= 'transparent' onPress= {this.getScreen}>
                            <View style= {{width: 300, height: 'auto'}} >
                            <Text> {item.title} </Text>
                                <View style= {{width: 300, height: 1, backgroundColor: 'red', marginBottom: 30, marginTop: 15}} /> 
                            </View>
                        </TouchableHighlight>
                    )}
                />
            </View>
        );
    }
}



const AppNavigator = StackNavigator({
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen }
});

Answer 1

在您的实现中，您正在丢失this的上下文。使用函数调用修复它：

renderItem={({ item }) => (
  <TouchableHighlight underlayColor='transparent' onPress={() => this.getScreen()}>
  ...
  </TouchableHighlight>
)}

此外，您还可以使用pattern：

const { navigate } = this.props.navigation;

navigate('Profile');

Answer 2

在构造函数内部，将其绑定到您的getScreen方法。

只需在构造函数中添加以下代码行即可。

this.getScreen =this.getScreen.bind(此)；