[react native / 리액트 네이티브] picker-select 사용,방법

설치

$ npm install react-native-picker-select

 

# React Native users

$ npm install @react-native-picker/picker

$ npx pod-install

 

# Expo

$ expo install @react-native-picker/picker

import

import RNPickerSelect from 'react-native-picker-select';

code

function Category({ onChangeCategory }) {
	return (
		<View style={styles.category}>
			<RNPickerSelect
				placeholder={{
					label: "카테고리를 선택해 주세요",
					value: null,
				}}
				onValueChange={(value) => onChangeCategory(value)}
				items={[
					{ label: "영화", value: "movie" },
					{ label: "책", value: "book" },
				]}
				style={{
					inputIOS: styles.IOS,
				}}
			/>
		</View>
	);
}

function RememberBook() {
	const [categoryValue, setCategory] = useState("");

	const onChangeCategory = (value) => setCategory(value);

	return (
		<View style={styles.inner}>
			<Category onChangeCategory={onChangeCategory} />
		</View>
	);
}

 

style 적용

	<RNPickerSelect
		...

		style={{
			inputIOS: styles.IOS,
		}}

		...
	/>

const styles = StyleSheet.create({
	IOS: {
		fontSize: 18,
	},
});