ReactNative에서 Dropdown 메뉴 찾기
3147 단어 reactnative
RactNative나 Expo에는 Picker의 기능이 있습니다만, Dropdown 메뉴가 익숙해져 있는 사람이 많기 때문에 좋을까라고 생각해, 가볍게 조사해 보았습니다만, 의외로 힘들었기 때문에 메모해 둡니다.
Dropdown 메뉴의 구성 요소는 얼마입니까?
그렇게 생각해 가볍게 조사해 본 바 이외라고 확실히 오는 것이 없었습니다.
또, 보기 좋게 보이더라도 최신 환경에서는 움직이지 않는 등의 문제가 있었습니다(이것 많았다).
시도한 것
구그라고 봤던 몇 가지 것을 시도해 보았습니다만, Warning이나 Error에 의해 거의 움직이지 않았습니다.
상당히 전에 issue는 오르고 있지만 유지 보수되지 않은 느낌입니다.
이거 좋다! 라고 하는 것이 있으면 꼭 가르쳐 주었으면 합니다. . .
React-native-picker-select
유일하게 움직인 react-native-picker-select를 사용해보십시오.
본 모듈은 결국 곳의 iOS, Android의 네이티브 컴포넌트에 맵핑하는 계의 것이지만, 갑자기 Picker라든지 나오기보다는, 우선 디자인 등을 다른 Form 컴포넌트와 통일화할 수 있으므로, 글쎄, 길리 요건은 충족 가나. . .
최종적으로는 아래와 같은 느낌으로 했습니다. 왼쪽 iOS, 오른쪽 안드로이드입니다.
먼저 iOS에서 스타일을 만들어 안드로이드에 같은 기술해 보았습니다만 border라든지 반영되지 않습니다. . . (이므로 backgroundColor 붙이고 있습니다).
아이콘이나 스스로 위치 조정 필요합니다. . .
이하, 샘플.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
export default class App extends React.Component {
render() {
return (
<View style={{ marginTop: 60 }}>
<Text style={{ marginVertical: 20, marginLeft: 30 }}>お住まいのエリア</Text>
<RNPickerSelect
onValueChange={(value) => console.log(value)}
items={[
{ label: '関西', value: '関西' },
{ label: '関東', value: '関東' }
]}
style={pickerSelectStyles}
placeholder={{ label: '選択してください', value: '' }}
Icon={() => (<Text style={{ position: 'absolute', right: 95, top: 10, fontSize: 18, color: '#789' }}>▼</Text>)}
/>
</View>
);
}
}
const pickerSelectStyles = StyleSheet.create({
inputIOS: {
fontSize: 16,
paddingVertical: 12,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: '#789',
borderRadius: 4,
color: '#789',
paddingRight: 30, // to ensure the text is never behind the icon
width: 300,
marginLeft: 30
},
inputAndroid: {
fontSize: 16,
paddingHorizontal: 10,
paddingVertical: 8,
borderWidth: 0.5,
borderColor: '#789',
borderRadius: 8,
color: 'black',
paddingRight: 30, // to ensure the text is never behind the icon
width: 280,
marginLeft: 30,
backgroundColor:'#eee'
},
});
흠.
Reference
이 문제에 관하여(ReactNative에서 Dropdown 메뉴 찾기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/zaburo/items/7e2d2f0f6b9317a7789e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
