React Native 导航到渲染外的屏幕

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

我想在 Card 中添加一个 onPress ，它将在应用程序中打开另一个屏幕。 Constant 在 render 外声明，Card 在 render 函数内作为模板调用。

Answer 1

将导航传递给卡片

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

};

React Native 导航到渲染外的屏幕

React Native Navigate to screen outside render

react-native

react-native-navigation