Question

我正在尝试使用react-navigation设置导航操作，但我遇到了麻烦，因为我使用FlatList和Pure Component来渲染列表中的项目。列表渲染正常但是当我尝试将onPress函数添加到TouchableHighlight时，我无法调用正常导航功能，因为它不知道变量导航的含义。我想保留Pure Component的单独文件，而不是在可能的情况下将其移动到其他类中。

Pure Component：

export default class Lot extends React.PureComponent {

    render() {
        return (
            <TouchableHighlight
                onPress={() => navigate('LotView')}
            >
                <View style={{ flex: 1, height: 150, alignItems: 'center', justifyContent: 'center' }}>
                    <View>
                        {this.props.active && (<Image source={images[this.props.index]} style={[styles.images]} />)}
                    </View>

                 </View>

            </TouchableHighlight>
        );
    }
}

以下是我的App.js课程。

FlatList

<FlatList
    data={this.state.lots}
    renderItem={({ item }) => <Lot {...item} />}
/>

导航屏幕

export const MyApp = StackNavigator({
    Home: { screen: HomeScreen },
    LotView: { screen: LotView },
});

Answer 1

Lot应该是虚拟组件（不应该有任何外部访问）

export default class Lot extends React.PureComponent {

    render() {
        return (
            <TouchableHighlight
                onPress={this.props.onPress} // <== CHANGED
            >
                <View style={{ flex: 1, height: 150, alignItems: 'center', justifyContent: 'center' }}>
                    <View>
                        {this.props.active && (<Image source={images[this.props.index]} style={[styles.images]} />)}
                    </View>

                 </View>

            </TouchableHighlight>
        );
    }
}

主屏幕

<FlatList
    data={this.state.lots}
    renderItem={({ item }) => <Lot {...item} onPress={() => this.props.navigate('LotView')} />} //<== CHANGED
/>

在JavaScript类之间重现Native变量

1 个答案: