Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
872 views
in Technique[技术] by (71.8m points)

button - Clickable Flat list item with Navigate something page in React Native

I put the local image and button in the flat list.

  1. How do I retrieve an image from Json?

  2. How do I move to another page when I click?

I'd like to divide up the script.

This is my code

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

To retrieve image from JSON, like

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

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

Move another page when click, like

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...