picker

@react-native-picker/picker

기계적 인조 인간	iOS	피커 리오

창	마코스

지원되는 버전

@React-Native-Picker/Picker	반응 신용	반응 네이티브 윈도우
> = 2.0.0	0.61+	0.64+
> = 1.16.0	0.61+	0.61+
> = 1.2.0	Jetifier와 함께 0.60+ 또는 0.59+	N/A
> = 1.0.0	0.57	N/A

시작하기

$ npm install @react-native-picker/picker --save

또는

$ yarn add @react-native-picker/picker

React Native V0.60 이상 (자동 링크)

[email protected] 이상이 자동 링크를 지원하기 때문에 연결 프로세스를 실행할 필요가 없습니다. Autolinking에 대한 자세한 내용은 여기를 참조하십시오. 이것은 [email protected] 이상에 의해 지원됩니다.

iOS

iOS의 Cocoapods는 다음 단계가 필요합니다.

 npx pod-install

기계적 인조 인간

추가 단계가 필요하지 않습니다.

Windows (자세한 내용은 확장)

창

자동 링크가없는 Windows의 사용에는 다음과 같은 추가 단계가 필요합니다.

ReactNativePicker 프로젝트를 솔루션에 추가하십시오.

1. Visual Studio 2019에서 솔루션을 엽니 다
2. 솔루션 탐색기에서 솔루션 아이콘을 마우스 오른쪽 버튼으로 클릭하십시오 D:devRNTestnode_modules@react-native-pickerpickerwindowsReactNativePickerReactNativePicker.vcxproj

Windows/MyApp.sln

주 응용 프로그램 프로젝트에 ReactNativePicker 에 대한 참조를 추가하십시오. Visual Studio 2019에서 :

메인 애플리케이션 프로젝트> 추가> 참조 ... 솔루션 프로젝트에서 ReactNativePicker 확인하십시오.

app.cpp

파일 상단에 포함 된 헤더에 #include "winrt/ReactNativePicker.h" 를 추가하십시오.

PackageProviders().Append(winrt::ReactNativePicker::ReactPackageProvider()); InitializeComponent(); .

마코스

MacOS의 Cocoapods는이 추가 단계가 필요합니다 (MacOS 디렉토리에서 호출)

 pod install

0.60 미만의 기본 반응 (링크 및 수동 설치)

다음 단계는 0.60보다 낮은 React Native 버전으로 작업하는 경우에만 필요합니다.

대부분 자동 설치

$ react-native link @react-native-picker/picker

수동 설치

iOS

1. Xcode에서 프로젝트 네비게이터에서 Libraries 마우스 오른쪽 버튼으로 클릭하십시오. Add Files to [your project's name]
2. node_modules ➜ @react-native-picker/picker 로 이동하여 RNCPicker.xcodeproj 추가하십시오
3. 프로젝트 네비게이터에서 Xcode에서 프로젝트를 선택하십시오. 프로젝트의 Build Phases 에 libRNCPicker.a 추가하십시오 ➜ Link Binary With Libraries
4. 프로젝트를 실행하십시오 ( Cmd+R ) <

기계적 인조 인간

1. 오픈 애플리케이션 파일 ( android/app/src/main/java/[...]/MainApplication.java )

• import com.reactnativecommunity.picker.RNCPickerPackage; 파일 상단의 가져 오기에
• getPackages() 메서드가 반환 한 목록에 new RNCPickerPackage() 추가하십시오.

2. android/settings.gradle 에 다음 줄을 추가하십시오 :

    include ':@react-native-picker_picker'
   project(':@react-native-picker_picker').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-picker/picker/android')
   

3. android/app/build.gradle 의 종속성 블록 내부에 다음 줄을 삽입하십시오.

     implementation project(path: ':@react-native-picker_picker')
   

마코스

1. Xcode에서 프로젝트 네비게이터에서 Libraries 마우스 오른쪽 버튼으로 클릭하십시오. Add Files to [your project's name]
2. node_modules ➜ @react-native-picker/picker 로 이동하여 RNCPicker.xcodeproj 추가하십시오
3. 프로젝트 네비게이터에서 Xcode에서 프로젝트를 선택하십시오. 프로젝트의 Build Phases 에 libRNCPicker.a 추가하십시오 ➜ Link Binary With Libraries
4. 프로젝트를 실행하십시오 ( Cmd+R ) <

RTL 지원

AndroidManifest.xml 에 android:supportsRtl="true" 를 추가해야합니다

   < application
      ...
      android : supportsRtl = " true " >

용법

@react-native-picker/picker 의 가져 오기 피커 :

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

Picker 가 사용할 상태를 작성하십시오.

 const [ selectedLanguage , setSelectedLanguage ] = useState ( ) ;

다음과 같이 Picker 추가하십시오.

 < Picker
  selectedValue = { selectedLanguage }
  onValueChange = { ( itemValue , itemIndex ) =>
    setSelectedLanguage ( itemValue )
  } >
  < Picker . Item label = "Java" value = "java" />
  < Picker . Item label = "JavaScript" value = "js" />
</ Picker >

안드로이드에서 프로그래밍 방식으로 피커를 열거나 닫으려면 (버전 1.16.0+에서 구할 수 있음), Picker 에 참조를 전달하십시오.

 const pickerRef = useRef ( ) ;

function open ( ) {
  pickerRef . current . focus ( ) ;
}

function close ( ) {
  pickerRef . current . blur ( ) ;
}

return < Picker
  ref = { pickerRef }
  selectedValue = { selectedLanguage }
  onValueChange = { ( itemValue , itemIndex ) =>
    setSelectedLanguage ( itemValue )
  } >
  < Picker . Item label = "Java" value = "java" />
  < Picker . Item label = "JavaScript" value = "js" />
</ Picker >

소품

• 상속 된 View 소품 ...

• onValueChange
• selectedValue
• style
• testID
• enabled
• mode
• prompt
• itemStyle
• selectionColor

---

참조

소품

onValueChange

항목을 선택한 경우 콜백. 다음 매개 변수로 호출됩니다.

• itemValue : 선택된 항목의 value 소품
• itemPosition :이 선택기에서 선택한 항목의 색인

유형	필수의
기능	아니요

---

selectedValue

항목 중 하나의 값 일치 값. 문자열 또는 정수 일 수 있습니다.

유형	필수의
어느	아니요

---

style

유형	필수의
PickersTyletype	아니요

---

testID

엔드 투 엔드 테스트 에서이보기를 찾는 데 사용됩니다.

유형	필수의
끈	아니요

---

enabled

False로 설정되면 피커가 비활성화됩니다. 즉, 사용자는 선택할 수 없습니다.

유형	필수의	플랫폼
부	아니요	안드로이드, 웹, 창

---

mode

Android에서는 사용자가 선택한 선택 항목을 표시하는 방법을 지정합니다.

• '대화': 모달 대화 상자를 보여줍니다. 이것은 기본값입니다.
• '드롭 다운': 피커보기에 고정 된 드롭 다운을 보여줍니다

유형	필수의	플랫폼
Enum ( '대화', '드롭 다운')	아니요	기계적 인조 인간

---

dropdownIconColor

Android에서는 드롭 다운 삼각형의 색상을 지정합니다. 입력 값은 react-native processColor 함수에 의해 허용되는 값이어야합니다.

유형	필수의	플랫폼
ColorValue	아니요	기계적 인조 인간

---

dropdownIconRippleColor

Android에서는 드롭 다운 삼각형의 잔물결 색상을 지정합니다. 입력 값은 react-native processColor 함수에 의해 허용되는 값이어야합니다.

유형	필수의	플랫폼
ColorValue	아니요	기계적 인조 인간

---

prompt

대화 상자 모드의 Android에서 대화 상자 제목으로 사용되는이 선택기의 프롬프트 문자열.

유형	필수의	플랫폼
끈	아니요	기계적 인조 인간

---

itemStyle

각 항목 레이블에 적용 할 스타일.

유형	필수의	플랫폼
텍스트 스타일	아니요	iOS, Windows

numberOfLines

Android & IOS에서는 총선 숫자 가이 숫자를 초과하지 않도록 라인 랩핑을 포함하여 텍스트 레이아웃을 계산 한 후 텍스트로 텍스트를 자르기 위해 사용됩니다. 기본값은 '1'입니다.

유형	필수의	플랫폼
숫자	아니요	안드로이드, iOS

onBlur

유형	필수의	플랫폼
기능	아니요	기계적 인조 인간

onFocus

유형	필수의	플랫폼
기능	아니요	기계적 인조 인간

selectionColor

유형	필수의	플랫폼
ColorValue	아니요	iOS

행동 양식

blur (Android 만, LIB 버전 1.16.0+)

프로그래밍 방식으로 피커를 닫습니다

focus (Android 만, LIB 버전 1.16.0+)

프로그래밍 방식으로 피커가 열립니다

pickeritemprops

개별 Picker.Item 에 적용 할 수있는 소품

label

피커 항목에 표시 값

유형	필수의
끈	예

value

피커 항목의 실제 값

유형	필수의
숫자, 문자열	예

color

피커 항목에 색상이 표시되었습니다

유형	필수의
ColorValue	아니요

fontFamily

피커 항목에 Fontfamily가 표시되었습니다

유형	필수의
끈	아니요

style

개별 품목 레이블에 적용 할 스타일.

유형	필수의	플랫폼
ViewStyleProp	아니요	기계적 인조 인간

enabled

False로 설정되면 특정 항목이 비활성화되며 즉, 사용자는 선택할 수 없습니다.

@default : true

유형	필수의	플랫폼
부울	아니요	기계적 인조 인간

contentDescription

컨텐츠 설명을 선택기 항목으로 설정합니다

유형	필수의	플랫폼
끈	아니요	기계적 인조 인간

피커 리오

소품

• 상속 된 View 소품 ...
• itemStyle
• onValueChange
• selectedValue
• selectionColor
• themeVariant

---

참조

소품

itemStyle

유형	필수의
텍스트 스타일	아니요

---

onValueChange

유형	필수의
기능	아니요

---

selectedValue

유형	필수의
어느	아니요

---

selectionColor

유형	필수의	플랫폼
ColorValue	아니요	iOS

---

themeVariant

유형	필수의
열거 ( '빛', '어두운')	아니요