React native Android Picker не показывает данные

Question

picker сам по себе его показ, но не его данные. Также, когда я нажимаю на нее, появляется пустая белая метка.

{/* Order by picker */}
<View style={globalStyles.rowView}>{/* FlexDirection:'row' */}
    <Text style={[globalStyles.text,styles.text]}>Ordenar por:</Text> {/* color:colors.white, fontSize:"17rem"*/}
    <Picker style={[globalStyles.text, styles.picker]}{/* color:colors.white, fontSize:"17rem"*/}{/* flex:1 */}
       selectedValue={this.state.orden}
       onValueChange={(itemIndex)=>{this.setState({orden:this.state.ordenar[itemIndex]})}}>

       {this.state.ordenar.map(element => {
           <Picker.Item label={element} value={element}/>
        })}

     </Picker>
</View>

Когда я пытаюсь использовать

<Picker.Item label={this.state.orden} value={this.state.orden}/>

или

<Picker.Item label={this.state.ordenar[1]} value={this.state.ordenar[1]}/>

, они оба работают так что this.state.orden и this.state.ordenar не пустые, и я представляю, что это не проблема стиля или flexbox, так как при этом втором способе отображаются данные, поэтому я предполагаю, что проблема заключается в функции map

Answer 1

Вы должны вернуть элемент jsx из функции карты, чтобы он работал. См. Фрагмент кода ниже, я обновил функцию вашей карты.

 {/* Order by picker */}
    <View style={globalStyles.rowView}>{/* FlexDirection:'row' */}
        <Text style={[globalStyles.text,styles.text]}>Ordenar por:</Text> {/* color:colors.white, fontSize:"17rem"*/}
        <Picker style={[globalStyles.text, styles.picker]}{/* color:colors.white, fontSize:"17rem"*/}{/* flex:1 */}
           selectedValue={this.state.orden}
           onValueChange={(itemIndex)=>{this.setState({orden:this.state.ordenar[itemIndex]})}}>

           {this.state.ordenar.map(element => {
               return(<Picker.Item label={element} value={element}/>) /*wrap your picker item around return.*/
            })}

         </Picker>
    </View>