Question

我有两个屏幕。第一个屏幕是HomeScreen，第二个屏幕是ProfileScreen。我在HomeScreen上使用FlatList，我想推送到另一个屏幕导航。但是，当我使用该代码时，我看到了错误消息：＆＃34;无法读取属性＆＃39;导航＆＃39;未定义＆＃34;

像这样的代码

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>
)}

此外，您还可以使用模式：

const { navigate } = this.props.navigation;

navigate('Profile');

Answer 2

在构造函数中将此绑定到getScreen方法。

只需在构造函数中添加以下行。

this.getScreen = this.getScreen.bind（this）;

更改屏幕FlatList onPress

2 个答案: