在 React Native 中使用导航页面的可点击平面列表项

问题描述

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

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

解决方法

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