反应本机导航到屏幕外部渲染

Question

const Card = (props) => {
    return (
        <TouchableOpacity onPress={() => this.props.navigation.navigate('Route')}>
            ...
        </TouchableOpacity>
    );

};


export default class HorizontalList extends Component {
    ...

    render() {
          return (
                <FlatList
                    ...
                    renderItem={({item: rowData}) => {
                        return (
                            <Card
                                thumb_image={rowData.thumb_image}
                                title={rowData.title}
                                innerSubTitle={rowData.innerSubTitle}
                                innerMainTitle={rowData.innerMainTitle}
                            />
                        );
                    }}
                    keyExtractor={(item, index) => String(index)}
                />
            );
    }
}

我想添加一个onPress in Card，它将在应用程序中打开另一个屏幕。在渲染外部声明常量，而Card在渲染函数内部被称为模板。

Answer 1

将导航传递至Card

<Card
   navigation={this.props.navigation}
   thumb_image={rowData.thumb_image}
   title={rowData.title}
   innerSubTitle={rowData.innerSubTitle}
   innerMainTitle={rowData.innerMainTitle}
/>

并像这样使用：

const Card = (props) => {
    return (
        <TouchableOpacity onPress={() => props.navigation.navigate('Route')}>
            ...
        </TouchableOpacity>
    );

};