在 React Native 中带有导航页面的可单击平面列表项

Question

我把本地图片和按钮放在平面列表中。

1. 如何从 Json 中检索图像？

2. 当我点击时如何移动到另一个页面？

我想分割脚本。

这是我的代码

export default class HotFlatList extends Component {
    render() {
    return(
        <View style={{flex:1, flexDirection:'column'}}>
            <View>
                <FlatList style={{backgroundColor:'block', opacity: 1}}
                    horizontal={true}
                    data={hotFlatListData}
                    renderItem={({item, index}) => {
                        return (
                            // <HorizontalFlatListItem item={item} index={index} parentFlatList={this}>
                            // </HorizontalFlatListItem>
                            <TouchableOpacity 
                            onPress={() => navigation.navigate("../components/Hook")}
                            style={{marginLeft: 20, alignItems: 'center'}}>
                                <Image source={require('../assets/apple.jpeg')} style={{borderRadius:30}}/>
                                <View style={{width: '100%', backgroundColor: '#02ad94', opacity: 0.5}}></View>
                                <Text style={{color: 'white', fontWeight: 'bold', fontSize:20, marginEnd: 5, marginTop: 5}}>apple</Text>
                            </TouchableOpacity>
                        );
                    }}
                    keyExtractor={item => item.hour}
                >

                </FlatList>
            </View>
        </View>
    );
            }
}

Answer 1

从 JSON 中检索图像，例如

const hotFlatListData = [{image: require('../assets/apple.jpeg')},{..}]

<Image source={item.image} style={{borderRadius:30, width:xx, height:xx}}/>

点击时移动另一个页面，比如

// remove this and extract "navigation" from function "props"
<TouchableOpacity onPress={() => navigation.navigate("ScreenRoute")}>
  ....
</TouchableOpacity>