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

Question

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

如何从 Json 检索图像？
点击后如何移动到另一页？

我想分剧本

这是我的代码

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>

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

Clickable Flat list item with Navigate something page in React Native

navigation

button

react-native

touchableopacity

react-native-flatlist