javascript - JavaScript 类之间的 React Native 变量

Question

我正在尝试使用 react 导航设置导航操作，但由于我使用 FlatList 和纯组件来渲染列表中的项目，所以遇到了麻烦。该列表渲染得很好，但是当我尝试将 onPress 函数添加到 TouchableHighlight 时，我无法调用正常的导航函数，因为它不知道变量导航的含义。如果可能的话，我想保留纯组件的单独文件，而不是将其移动到其他类中。

纯组件:

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
    data={this.state.lots}
    renderItem={({ item }) => <Lot {...item} />}
/>

导航屏幕

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

Answer 1

批处理应该是虚拟组件(不应具有任何外部访问权限)

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
/>