react-native - style - reactnative component




기본 React Native<Picker> 드롭 다운 화살표 아이콘 변경 (4)

React Native를 사용하여 iOS 기본 구성 요소를 구성 가능으로 문서화 된 것 이상으로 변경할 수 없습니다. Apple은 iOS 사용자들에게 익숙하고 일관된 경험을 제공하는 본래 요소의 사용에 대해 매우 강한지지를 보냅니다.

이전에 선택한 항목 주변의 선을 변경하거나 제거하지 못했습니다. React Native와 JavaScript 만 사용하는 것은 불가능합니다. Objective-C 또는 Swift를 작성하려는 경우 기본 구성 요소를 확장하고 구성 가능한 API를 React 구성 요소에 표시 할 수있는 POD 통합을 직접 만들 수 있습니다.

나에게 이것은 너무 많은 작업이었고 나는 처음부터 내 자신의 js 구현을 작성했다.

나는 특히 그 색깔을 바꾸고 싶다 :

<Picker selectedValue={this.state.selected}
        onValueChange={(value) => this.setState({selected:value})}  >
  {data.map ((value)=><Picker.Item label={value} value={value} key={value}/>)}
</Picker>

당근 아이콘 (드롭 다운)의 색상을 안드로이드에서 변경하려는 사용자는 styles.xml에 다음 줄을 추가 할 수 있습니다.

<item name="android:colorControlNormal">#FFFFFF</item>

다음과 같이 표시되어야합니다.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:colorControlNormal">#FFFFFF</item>
    </style>
</resources>

일단 완료되면, 네이티브 파일에 대한 변경 사항이 뜨겁게 다시로드되지 않으므로 앱을 다시 빌드하십시오.


이 시도...

<Picker
  mode="dropdown"
  style={{backgroundColor: 'red'}}
  selectedValue={this.state.selected}
  onValueChange={(value) => this.setState({selected: lang})}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

한 가지 가능한 솔루션은 기존의 화살표를 피커 컨테이너의 나머지 배경과 일치하는 배경색을 가진보기 내에 래핑 된 절대적으로 배치 된 벡터 아이콘으로 오버레이하는 것입니다. 일반적으로 Picker 화살표는 Picker.Item 값의 길이에 따라 자체 위치를 변경하지 않기 때문에 정상적으로 작동합니다.





picker