스타일링 리액트 네이티브 피커

스타일링 리액트 네이티브 피커

리액트 네이티브 선택기에서 항목의 텍스트 색상을 스타일링하려고 합니다.지금까지 iOS에서만 일했는데 크로스 플랫폼 솔루션을 찾을 수 있다면 정말 좋을 것 같아요.

나는 다음과 같은 것을 시도했다.

피커의 스타일링 색상

<Picker style={{color:'white'}} ...etc >

선택 항목의 스타일 색상

<Picker.Item style={{color:'#fff'}} label={'Toronto'} value={'Toronto'} />

색채를 추가하는 예도 봤고 그래서 이걸 해봤어요.

<Picker.Item color='white' label={'Toronto'} value={'Toronto'} />

여기서 완전히 망했어통찰해 주셔서 감사합니다!

편집: 다음은 해결책입니다. 선택 도구 요소에 있는 itemStyle 프로펠러를 사용하십시오.iOS 전용인 것 같습니다.

<Picker itemStyle={{color:'white'}} >
      <Picker.Item color='white' label={'Toronto'} value={'Toronto'} />
      <Picker.Item  label={'Calgary'} value={'Calgary'} />
</Picker>

색상을 변경하려면 다음을 사용해야 합니다.

<Item label="blue" color="blue" value="blue" />

텍스트 색상, 배경색, 글꼴 크기 및 여백 및 패딩과 같은 기타 기타 기타 항목을 변경하려면 다음과 같이 "항목 스타일"을 사용하십시오.

<Picker
    selectedValue={this.state.selectedItem}
    style={{ height: 100, width: 200 }}
    onValueChange={this.onChangeItem}
    itemStyle={{ backgroundColor: "grey", color: "blue", fontFamily:"Ebrima", fontSize:17 }}
>
    {cityItems}
</Picker>

선택 도구 주위에 테두리가 필요한 경우 보기 내에서 선택 도구의 테두리를 둘러서 제공할 수 있습니다.다음과 같습니다.

<View style={{ borderWidth: 1, borderColor: 'red', borderRadius: 4 }}>
    <Picker
        selectedValue={this.state.selectedItem}
        style={{ height: 100, width: 200 }}
        onValueChange={this.onChangeItem}
        itemStyle={{ backgroundColor: "grey", color: "blue", fontFamily:"Ebrima", fontSize:17 }}
    >
        {cityItems}
    </Picker>
</View>

해피 코딩 :)

앞서 말한 바와 같이itemStyle어드밴스드propertyReact Native 문서에서 볼 수 있듯이 iOS 플랫폼에서만 지원됩니다.따라서 Android에서 피커 항목을 스타일링하기 위해 예를 들어,fontFamily지금은 네이티브 안드로이드 스타일만 사용할 수 있습니다.그러면 두 플랫폼 모두에서 사용할 수 있습니다.

이 점을 염두에 두고 새로운 것을 추가한다.<style>자원 태그에 태그 붙입니다.style.xml파일(일반적으로 경로로 현지화):android/app/src/main/res/values/styles.xml설정해 주세요.AppTheme추가된 스타일을 계산합니다. 예:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
     <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
    </style>

    <!-- Item selected font. -->
    <style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="android:fontFamily">casual</item>
    </style>

    <!-- Dropdown options font. -->
    <style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:fontFamily">casual</item>
      <item name="android:padding">8dp</item>
    </style>
<resources>

중요사항:찾고 있는 Android의 스타일 속성 이름이 React Native와 다를 수 있습니다.예를 들어, 위치 설정을 사용해야 할 수 있습니다.android:gravity유연성이 아니라따라서 Android에서 전용 XML 태그 속성을 검색하여 스타일을 지정해야 할 수 있습니다.이를 염두에 두고 React Native로 번역color텍스트 글꼴의 경우android:textColorAndroid용입니다.

유용한 링크:

• React Native Picker Android git 문제 해결.
• Android 문서의 XML 전용 스타일 목록 - Google

Touchable Opacity 안에 피커를 추가하고 스타일을 Touchable Opacity에 적용하기만 하면 됩니다.
예:-

<TouchableOpacity style={[style.textFieldSmall, style.textInput]}>
 <Picker
   style={{color: '#fff', placeholderTextColor: '#fff'}}
   selectedValue={this.state.choosenLabel}
   onValueChange={
   (itemValue, itemIndex) => this.setState({
    choosenLabel: itemValue, 
    choosenindex:itemIndex})
    }
 >
  <Picker.Item label="Purchase" color="white" value="Purchase" />
  <Picker.Item label="YES" value="YES" />
  <Picker.Item label="NO" value="NO" />
 </Picker>
 </TouchableOpacity>

그것을 안에 싸다<View>,

 <View style={styles.card}>
 <Picker itemStyle={{color:'white'}} >
      <Picker.Item color='white' label={'Toronto'} value={'Toronto'} />
      <Picker.Item  label={'Calgary'} value={'Calgary'} />
</Picker>
</View>


//Styles
const styles = StyleSheet.create({
card:{
    borderWidth: 1,
    width: 314,
    borderColor: "rgba(155,155,155,1)",
    borderBottomLeftRadius: 10,
    backgroundColor: "rgba(214,210,210,1)",
    marginTop: 10,
    marginLeft: 4
  },
})

시험해 보세요.https://github.com/caoyongfeng0214/rn-overlay/wiki/Picker

itemTextStyle: { color: 'red' }

색상 대신 backgroundColor를 사용해 보십시오.https://facebook.github.io/react-native/docs/view.html#style

언급URL : https://stackoverflow.com/questions/40101451/styling-react-native-picker