강의내용 바탕으로 다른 expo 기능들을 알아보고 있는데요,

picker 기능을 구현해보고 싶어서 찾아봤는데,

https://www.kindacode.com/article/how-to-implement-a-picker-in-react-native/

아래 링크대로 따라 만들어 보았습니다.

링크보시면 드롭다운으로 국가를 선택하면 아래 텍스트로 내가 선택한 국가가 출력이 되는데요,

예를들어 캐나다를 선택하면 텍스트와 함께 캐나다 국기 이미지가 들어가보게 구현해보려고 합니다

코드 어느 부부분을 수정해야 할까요??

import React, { useState } from "react";

import { View, Text, StyleSheet } from "react-native";

import { Picker } from "@react-native-picker/picker";

function App() {

const [country, setCountry] = useState('Unknown');

return (

<View style={styles.screen}>

<Text style={styles.text}>KindaCode.com</Text>

<Picker

selectedValue={country}

onValueChange={(value, index) => setCountry(value)}

mode="dropdown" // Android only

style={styles.picker}

>

<Picker.Item label="Please select your country" value="Unknown" />

<Picker.Item label="Australia" value="Australia" />

<Picker.Item label="Belgium" value="Belgium" />

<Picker.Item label="Canada" value="Canada" />

<Picker.Item label="India" value="India" />

<Picker.Item label="Japan" value="Japan" />

</Picker>

<Text style={styles.text}>Your conuntry: {country}</Text>

</View>

);

}

export default App;

// Just some styles

const styles = StyleSheet.create({

screen: {

flex: 1,

justifyContent: "center",

alignItems: "center",

backgroundColor: 'yellow'

},

text: {

fontSize: 24,

},

picker: {

marginVertical: 30,

width: 300,

padding: 10,

borderWidth: 1,

borderColor: "#666",

},

});