당신은 React Native 팀이 NativeBase Picker와 마주하는 동일한 벽에 부딪혔을 것이다. 드롭다운이 렌더링되며, 보이는 것처럼 iOS는 정상 작동하고, 그리고 안드로이드는 당신의 논리를 무시한다. 충돌이 없고 경고도 없고, 단지 기능적으로 보이는 픽커만 나타난다. 당신의 비즈니스 논리가 실행되지 않는다. onValueChange 마틴 도나디우
NativeBase Picker는 경험 있는 개발자들을 놀라게 하는 이유입니다. 설정은 간단하고 스타일링은 관리할 수 있지만, 프로덕션의 신뢰성은 Android에 특정한 실패를 이해하는 데에 달려 있습니다. 대부분의 가이드는 이점을 생략하거나 언급하지 않습니다.
내용목록
- NativeBase Picker를 사용하기
- 상태 바인딩 및 선택 처리
- Android onValueChange 버그를 해결하는 방법
- 스타일링 및 테마 설정
- 고급 시나리오 및最佳 관행
- 결론
NativeBase 픽커를 사용하는 방법
픽커는 일반적으로 스프린트의 마지막에 추가되는 컴포넌트 중 하나입니다. 국가 선택기, 상태 필드, 약속 유형, 배송 옵션. 플랫폼 동작이 UI에 유입될 때까지 작게 느껴질 수 있습니다.
NativeBase 픽커는 NativeBase Picker 스크린에 나타나는 것을 쉽게 얻을 수 있습니다. iOS 및 Android에서 원시 픽커를 렌더링하고 React Native Picker가 더 이상 사용되지 않는 NativeBase의 이전 설정을 대체하기 위해 만들어졌기 때문에, 많은 레거시 코드베이스가 여전히 그것에 의존하고 있습니다.
정상적인 React Native 설정에서 컴포넌트를 설치합니다.
NativeBase를 이미 사용 중인 프로젝트의 경우, 주된 작업은 올바른 원초체를 가져오고 일단 일일이 wrapper logic를 피하는 것입니다. 가장 단순한 표시되는 픽커부터 시작하세요.
모바일 및 하이브리드 스택을 동시에 작업하는 경우, React code가 더 넓은 환경인 React Native의 패키징 방식도 이해하는 것이 도움이 됩니다. React mobile 앱 워크플로우에서 Capacitor픽커 code는 익숙하지만 배포 예상은 달라집니다.
기본 예제는 다음과 같습니다.
import React, { useState } from 'react';
import { Container, Content, Form, Item, Picker, Icon } from 'native-base';
export default function BasicPickerScreen() {
const [selectedValue, setSelectedValue] = useState('key0');
return (
<Container>
<Content padder>
<Form>
<Item picker>
<Picker
mode="dropdown"
iosIcon={<Icon name="arrow-down" />}
selectedValue={selectedValue}
onValueChange={(value) => setSelectedValue(value)}
>
<Picker.Item label="Choose one" value="key0" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="TypeScript" value="ts" />
<Picker.Item label="React Native" value="rn" />
</Picker>
</Item>
</Form>
</Content>
</Container>
);
}추상화 없이 첫 번째 픽커를 렌더링합니다.
첫 번째 패스는 두 가지 질문에만 답해야 합니다.
- 정확하게 렌더링되는지 확인합니다. 필드가 레이아웃 내에 나타나고 간격을 존중하며, 양쪽 플랫폼에서 열리는지 확인합니다.
- 입력 경로가 정확한가요? NativeBase 프로젝트는 보통 기존과 새로운 컴포넌트 API를 혼합한 이유로 실패합니다.
- 선택된 값이 제어되는지 확인하세요. 조립품 프로토타입이라도 사용
selectedValue상태에서부터 시작하세요. 상태가 아닌 선택기 code는 나중에 디버깅하기가 더 어려워집니다.
실용적인 규칙: 서버 데이터, placeholder 규칙, 분석 Hook, 유효성 검사 Hook을 같은 선택기에 매핑하지 마세요. 먼저 컴포넌트를 표시하고 제어하세요.
기본적인 baseline이 중요합니다. Android가 나중에 이상하게 행동할 때, 전체 폼 아키텍처가 문제가 아니라는 것을 알 수 있습니다. 그것은 선택기입니다.
데이터 바인딩 및 선택 처리
선택기가 렌더링되면 다음 작업은 그것을 유용하게 만드는 것입니다. React Native에서 그것은 제어된 입력처럼 다루고 선택된 값을 컴포넌트 상태에 저장하는 것입니다.
표준 경로는 간단합니다. 현재 값을 저장하고 useState, 선택된 값을 전달하세요. selectedValue그리고 상태를 업데이트합니다. onValueChange다른 형식의 입력 필드와 마찬가지로 React Native TextInput 패턴UI 컨트롤이 다르더라도
제어된 값을 사용하세요
이것이 유효성 검사나 부수 효과를 추가하기 전에 사용할 수 있는 깨끗한 버전입니다.
import React, { useState } from 'react';
import { Text } from 'react-native';
import { Form, Item, Picker } from 'native-base';
export default function RolePicker() {
const [role, setRole] = useState('');
return (
<>
<Form>
<Item picker>
<Picker
mode="dropdown"
selectedValue={role}
onValueChange={(value) => setRole(value)}
>
<Picker.Item label="Select a role" value="" />
<Picker.Item label="Admin" value="admin" />
<Picker.Item label="Editor" value="editor" />
<Picker.Item label="Viewer" value="viewer" />
</Picker>
</Item>
</Form>
<Text>Selected role: {role || 'none'}</Text>
</>
);
}code은 예측 가능한 참조 소스를 제공합니다. UI는 role그리고 모든 하위 함수는 동일한 상태에서 읽습니다.
선택 로직을 작고 테스트 가능한 것으로 유지하세요
개발자가 오버로드할 때 문제가 발생합니다. onValueChange. 그들은 데이터를 가져와 여러 상태 조각을 변형하고 내비게이션을 트리거하고 분석 로그를 하나의 인라인 함수에서 기록합니다. 픽커 동작이 실패할 때 디버깅이 고통스럽습니다.
보다 나은 패턴은 값 저장소와 부수 효과를 분리하는 것입니다.
import React, { useEffect, useState } from 'react';
import { Text } from 'react-native';
import { Form, Item, Picker } from 'native-base';
export default function DepartmentPicker() {
const [department, setDepartment] = useState('');
const [message, setMessage] = useState('No department selected');
useEffect(() => {
if (!department) {
setMessage('No department selected');
return;
}
setMessage(`Department selected: ${department}`);
}, [department]);
return (
<>
<Form>
<Item picker>
<Picker
selectedValue={department}
onValueChange={setDepartment}
>
<Picker.Item label="Select department" value="" />
<Picker.Item label="Sales" value="sales" />
<Picker.Item label="Support" value="support" />
<Picker.Item label="Operations" value="operations" />
</Picker>
</Item>
</Form>
<Text>{message}</Text>
</>
);
}이 구조는 두 가지 유용한 일을 수행합니다:
- 픽커가 선택 상태 업데이트만 관리하도록 만듭니다.
- 앱 동작을
useEffect에서 테스트하고 추론할 수 있도록 옮깁니다.
폼 컴포넌트가 선택된 값이 무엇인지 신뢰할 수 없다면, 모든 부수 효과가 의심스럽게 됩니다.
이 점은 안드로이드에서 특히 중요합니다. NativeBase Picker의 의도된 이벤트 흐름이 항상 유지되지 않기 때문입니다.
안드로이드 onValueChange 버그를 해결하는 방법
이 부분은 대부분의 기사에서 생략됩니다. NativeBase Picker는 안드로이드에서 보이는 동안 정확한 순간에 실패할 수 있습니다.
커뮤니티 문서에서는 이전 픽커 구현에 대한 설명이 있습니다. 이 설명은 실제로 플랫폼 간의 분리가 있습니다. 안드로이드는 onValueChange를 호출하지 않으면서, iOS는를 호출합니다. 이 실패는 Android에서 100% 기능 불일치, Android 기기에서 함수 트리거링 성공률 0%에 대해 동일한 code 구현 문서화된 보고서에서 동일한 문서화가 개발자에게 대체 방법 또는 마이그레이션 방향을 제시하고 NativeBase 3.0 Select 성공률 98%를 달성하는 NativeBase Picker 구성 요소 NativeBase Picker 구성 요소의 Android 버그와 제안된 해결책에 대한 설명 NativeBase Picker 구성 요소의 Android 버그와 제안된 해결책에 대한 설명 Android에서 NativeBase Picker 구성 요소가 작동하지 않는 이유.
Android에서 NativeBase Picker 구성 요소가 작동하지 않는 이유는 구현 세부 사항 때문입니다.
NativeBase Picker 구성 요소가 iOS에서 작동하는 이유
iOS에서 NativeBase Picker 구성 요소가 작동하는 이유는 모달 기반 동작이 이벤트 시스템에 바인딩되기 때문입니다.
Android에서 NativeBase Picker 구성 요소가 작동하지 않는 이유는 모달 기반 동작이 이벤트 시스템에 바인딩되지 않기 때문입니다.
<Picker
selectedValue={status}
onValueChange={(value) => {
setStatus(value);
saveStatusToApi(value);
trackSelection(value);
updateDependentFields(value);
}}
>Android에서 NativeBase Picker 구성 요소가 작동하지 않는 이유는 모달 기반 동작이 이벤트 시스템에 바인딩되지 않기 때문입니다.
A 프로덕션에서 유지되는 대안
가장 신뢰할 수 있는 대안은 구조적이지 않고 외관적인 것이 아니다. 선택된 값을 저장하는 데 집중하는 픽커 상호 작용을 유지하고, 픽커 핸들러 외부에서 상태 변경에 반응한다.
import React, { useEffect, useState } from 'react';
import { Form, Item, Picker } from 'native-base';
export default function StatusPicker() {
const [status, setStatus] = useState('');
const [didMount, setDidMount] = useState(false);
useEffect(() => {
if (!didMount) {
setDidMount(true);
return;
}
if (!status) return;
runStatusSideEffects(status);
}, [status, didMount]);
const runStatusSideEffects = (value) => {
console.log('Selected status:', value);
// call validation, API sync, or dependent form updates here
};
return (
<Form>
<Item picker>
<Picker
selectedValue={status}
onValueChange={setStatus}
>
<Picker.Item label="Select status" value="" />
<Picker.Item label="Pending" value="pending" />
<Picker.Item label="Approved" value="approved" />
<Picker.Item label="Rejected" value="rejected" />
</Picker>
</Item>
</Form>
);
}이것이 왜 도움이 되는가:
- 상태는 중앙에 유지된다: 컴포넌트 로직은
status픽커 이벤트 페이로드만 아니라서 - 사이드 이펙트가 명확해진다: API 호출, 의존 필드 업데이트 및 추적이 더 이상 약한 UI 콜백 내부에 존재하지 않는다.
- code를 더 쉽게 교체할 수 있다: NativeBase Picker로 이주하는 경우 대부분의 비즈니스 로직이 손상되지 않는다.
안드로이드 프로젝트에 특히 안드로이드 앱이 이미 네이티브 패키징 복잡성을 가지고 있다면, 안드로이드 장치에서 테스트하는 것을 추천한다. Capacitor 앱을 위한 안드로이드 설정.
Select로 마이그레이션하는 것이 더 깨끗한 결정입니다.
픽커가 체크아웃, 온보딩, 또는 규제 데이터 입력과 같은 крит적 워크플로에 위치한다면, 이전 동작을 대체하는 대신에 픽커를 NativeBase 3.0으로 이동하는 것이 보다 안전한 장기적인 선택입니다. Select 버그는 단순히 불편함만이 아닙니다. 이는 비즈니스 로직을 안전하게 위치할 수 있는 곳을 변경합니다.
픽커를 유지하는 경우, 픽커를 UI 셸로 간주하고 최소한의 책임만 부여하는 마음셋을 유지하는 것이 좋습니다. 이러한 마음셋은 많은 silent Android regressions를 방지할 수 있습니다.
픽커 컴포넌트 스타일링 및 테마링
픽커가 작동하는 경우에도, 앱의 나머지 부분과 일치하지 않으면 완성되지 않은 느낌을 받습니다. NativeBase는 컨트롤이 의도된 것처럼 느끼게 해주는 충분한 hook를 제공하지만, 픽커를 직접 싸우기보다는 픽커 주변의 컨테이너를 스타일링하는 것이 가장 깨끗한 결과를 얻는 경우가 많습니다.
스마트폰을 잡고 있는 손과 여행 예약 앱에 native base 픽커 드롭다운 메뉴가 표시된 사진.
픽커 자체는 부분적으로 네이티브 렌더링에 의해 제약을 받습니다. 컨테이너는 픽커보다 스페이싱, 경계 처리, 레이아웃 리듬에 대한 더 많은 제어권을 제공합니다.
실용적인 패턴:
이 접근 방식은 일반적으로 theme overrides를 과도하게 엔지니어링하지 않고 대부분의 방법으로 결과를 얻을 수 있습니다.
import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { Form, Item, Picker, Icon } from 'native-base';
export default function StyledPicker() {
const [country, setCountry] = useState('');
return (
<Form>
<Item style={styles.pickerWrapper} picker>
<Picker
mode="dropdown"
iosIcon={<Icon name="arrow-down" style={styles.icon} />}
textStyle={styles.pickerText}
selectedValue={country}
onValueChange={setCountry}
>
<Picker.Item label="Select country" value="" />
<Picker.Item label="Germany" value="de" />
<Picker.Item label="Japan" value="jp" />
<Picker.Item label="Brazil" value="br" />
</Picker>
</Item>
</Form>
);
}
const styles = StyleSheet.create({
pickerWrapper: {
borderWidth: 1,
borderColor: '#D1D5DB',
borderRadius: 10,
marginTop: 12,
paddingLeft: 8,
backgroundColor: '#FFFFFF',
},
pickerText: {
color: '#111827',
fontSize: 16,
},
icon: {
color: '#111827',
fontSize: 18,
},
});이미지: 스마트폰을 잡고 있는 손과 여행 예약 앱에 native base picker dropdown menu가 표시된 사진.
플랫폼에 대한 인식에 따라 표시합니다.
iOS와 Android는 거의 동일한 스타일링이 필요하지 않습니다. 그러나 일관된 의도는 필요합니다. 동일한 시각적 토큰은 여전히 다른 패딩, 아이콘 배치 또는 픽커 모드가 필요할 수 있습니다.
유용한 조정 사항은 다음과 같습니다:
- iOS에서: 필드에 여유를 주고 모달 표시가 주변 레이블과 어떻게 관련되어 있는지 주의 깊게 살펴보세요.
- Android에서: 다양한 기기에서 텍스트 클리핑과 기본 스피너 높이를 확인하세요.
- 두 경우 모두: 장치 선택과 실제 선택을 구별하기 위한 장치 텍스트를 시각적으로 구분하세요.
짧은 비교가 도움이 될 것입니다:
| 관심사 | iOS | 안드로이드 |
|---|---|---|
| 열리는 동작 | 모달의 느낌 | 스피너의 느낌 |
| 아이콘의 기대 | 많은 경우에 장식적인 | 많은 경우에 기능적인 |
| 간격 문제 | 프레이스 홀더 레이아웃이 느슨한 느낌 | 텍스트가 좁은 느낌 |
UI에 그라디언트, 층식 카드, 또는 고대비 표면이 포함되어 있다면, 픽커 wrapper를 동일한 처리를 사용하는 인터페이스에서 사용하는 것과 같은 방법으로 정렬하십시오. React Native의 선형 그라디언트 UI 작업과 같은 패턴을 사용하십시오. 그라디언트, 층식 카드, 또는 고대비 표면이 포함된 UI에서, 픽커 wrapper를 동일한 처리를 사용하는 인터페이스에서 사용하는 것과 같은 방법으로 정렬하십시오. React Native 선형 그라디언트 UI 작업과 같은 패턴을 사용하십시오..
설계 주의사항: 사용자는 드롭다운 자체보다 닫힌 필드가 폼 내부에 어떻게 위치하는지에 더 많은 판단을 내립니다.
그래서 반경, 레이블 간격, placeholder 색상이 더 중요한 것보다 PICKER 커스터마이즈의 특이한 것보다 더 중요합니다.
고급 시나리오 및最佳 관행
대부분의 PICKER 버그는 프로토 타입 단계를 벗어나면 나타납니다. 문제는 옵션이 서버에서 오고, 유효성 규칙이 플랫폼에 따라 다르고, placeholder 가 유효한 값처럼 행동할 수 없을 때 시작됩니다.
iOS에서 특히 짜증나는 반복적인 에지 케이스는 개발자가 서버에서 PICKER 값을 로드하는 동안 placeholder 입력이 선택할 수 없도록 방지해야 한다는 것입니다. 그러나 공식 자료가 그 경로를 직접적으로 다루지 않는 경우가 많습니다. 커뮤니티 토론은 iOS에서 placeholder 값이 선택할 수 있는 경우가 발생한다는 것을 강조합니다. 이것이 서버 로드 PICKER 값과 placeholder 선택에 대한 React Native 커뮤니티 토론에 대한 언급입니다.NativeBase에서 동적 PICKER를 사용하는 4단계 데이터 흐름 프로세스를 설명하는 다이어그램입니다. 서버 데이터에서 PICKER 옵션을 안전하게 로드하세요..
advancedScenariosAndBestPractices
The mistake I see most often is treating fetched data as immediately picker-ready. Keep a small transformation layer between your API response and the component.
import React, { useEffect, useState } from 'react';
import { Form, Item, Picker } from 'native-base';
export default function DynamicCategoryPicker() {
const [categories, setCategories] = useState([]);
const [selectedCategory, setSelectedCategory] = useState('');
useEffect(() => {
const loadCategories = async () => {
const response = await fetch('https://example.com/api/categories');
const data = await response.json();
const formatted = data.map((item) => ({
label: item.name,
value: String(item.id),
}));
setCategories(formatted);
};
loadCategories();
}, []);
return (
<Form>
<Item picker>
<Picker
selectedValue={selectedCategory}
onValueChange={setSelectedCategory}
>
<Picker.Item label="Select category" value="" />
{categories.map((item) => (
<Picker.Item
key={item.value}
label={item.label}
value={item.value}
/>
))}
</Picker>
</Item>
</Form>
);
}그런 형식 단계는 안정적인 계약을 제공합니다. 선택기에는 API의 내부 형태를 알 필요가 없습니다.
iOS에서 placeholder 선택 방지
가장 안전한 규칙은 간단합니다. placeholder를 실제 옵션으로 다루지 마십시오. UI 라이브러리가 그것을 렌더링하기 쉽게 만드는 것과 관계없이.
실용적인 패턴:
- 빈 보초 값을 사용하십시오: placeholder 값을 유지하십시오
''또는 다른 유효하지 않은 애플리케이션 값. - 유효성 검사하기 전에: 빈 값을 폼 유효성 검사에서만 거부하지 마십시오. UI에서만.
- 다운스트림 액션 비활성화: placeholder 값이 선택된 경우에만 submit 버튼을 비활성화하십시오.
더 엄격한 흐름을 위한, placeholder가 선택된 경우에만 렌더링하는 helper 텍스트를 제공하십시오.
const isValidSelection = selectedCategory !== '';그런 다음 액션 버튼을 게이트하거나 API 호출을 해당 조건 대신에 대신으로 차단하세요.
접근성 및 생산 습관
픽커는 종종 접근성 검토를 통과하지만, 그들은 명확한 레이블링 및 예측 가능한 상태가 필요합니다.
몇 가지 습관은 빠르게 성과를 낸다:
- 접근성 레이블을 추가하세요: 스크린 리더가 필드를 이해할 수 있도록 하세요.
- 레이블을 명확하게 하세요: “Country” is better than “Select”.
- 테스트 상태 복원: 폼을 다시 열고 이전에 선택한 항목이 올바르게 나타나는지 확인하세요.
- 선택에 의한 논리와 관련된 단위 테스트를 작성하세요: UI 외부의 논리가 가장 중요합니다. 단위 테스트 React 동작 상태 전환을 보호하는 데 도움이 됩니다.
픽커 자체는 거의 비즈니스 крит적인 것이 아닙니다. 일반적으로 뒤에 있는 상태 변경이 중요합니다.
동적 폼을 안정적으로 유지하는 데 필요한 마음-set입니다. NativeBase Picker를 입력 표면으로 다루세요. 실제 규칙은 상태, 유효성 검사 및 제출 흐름에 넣으세요.
결론
NativeBase Picker는 유용할 때가 있습니다. picker가 깨질 때 그 이유를 이해하면 됩니다. 설정은 간단하고 스타일링은 가능하며 서버에서 주어지는 옵션 목록은 관리가 가능합니다. 그러나 Android 이벤트 처리는 중요한 함정입니다. 프래그먼트 픽커 콜백에서 비즈니스 로직을 제거하고 상태 기반 효과로 옮기면 컴포넌트가 훨씬 더 예측 가능해집니다.
오래된 코드베이스의 경우 이 대안이 종종 충분합니다. 중요한 흐름의 경우 Select 로 마이그레이션하는 것이 일반적으로 더 좋은 투자입니다. 어느 쪽이든 키는 동일합니다. 픽커를 믿지 마세요. 단지 렌더링만 하면 됩니다.
If your team ships Capacitor or Electron apps and wants to push JavaScript, CSS, copy, config, and asset fixes without waiting for store review, Capgo context
