Can not set <Image> as Picker.Item label in Android

问题

For my react-native app, I need Image+Text in label of Picker.Item like in picture below.

Everything okay in IOS but on Android I get an error.

Here is my Picker Component code.

<Picker style={{width: 100, height: '100%', marginLeft: 5}}
        selectedValue={this.state.selectedCountry}
        onValueChange={(value)=>this.onCodeChanged(value)}>
    <Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
        <Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+90.png')}/> +90</Text>} value="+90"/>
    <Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
        <Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+44.png')}/> +44</Text>} value="+44"/>
    <Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
        <Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+1.png')}/> +1</Text>} value="+1"/>
</Picker>

here is the error screen I get on Android

I got stuck here for 24 hours, please help me.

Here is the whole file - Leads.JS

import React, {Component} from 'react';
import {Dimensions, AsyncStorage,View,Image, TextInput} from 'react-native';
import {Container, Form, H3, Footer, Button, Icon, Text, Body, Spinner, Item, Left, Right, Input, Thumbnail,Picker,Label} from 'native-base';
import {Actions} from 'react-native-router-flux';
import Header from './commonComponents/CustomHeader'

const {width, height} = Dimensions.get("window"),
    vw = width / 100
vh = height / 100

export default class Leads extends Component {
    constructor(props) {
        console.log("in constructor");
        super(props);
        this.state = {
            selectedCountry: '+44',
            selectedCountryImage: '+44.png',
            fullName: 'Terry',
            placeHolder: 'full name',
            phone: '45245421'
        };
    };


    onCodeChanged(value)
    {
        this.setState({selectedCountry: value},()=>this.setImage());

    }

    setImage()
    {
        imgName = '../assets/' + this.state.selectedCountry + '.png';
        this.setState({selectedCountryImage: imgName},()=>console.log("Image: ",this.state.selectedCountryImage,"\nCountry: ", this.state.selectedCountry));
    }


    render()
    {

        const styles = {
            container: {
                alignItems: 'center'
            }
        }

        return(
            <Container>
                <Header title={"Leads"}/>
                <View style={{width: width-40, marginLeft: 20, marginRight: 20, height: height-140, marginTop: 20,flexDirection: 'column'}}>

                    <View style={{backgroundColor: '#d7d7d7', width: '100%', height: 50, justifyContent: 'center', marginTop: 30}}>
                        <Text style={{fontWeight: 'bold', marginLeft: 10}}>Lead Info</Text>
                    </View>

                    <Text style={{fontWeight: 'bold', color: '#d7d7d7',width: '100%', marginTop: 20}}>Full Name</Text>
                    <View style={{height: 50, width: '100%', borderBottomColor: '#d7d7d7', borderBottomWidth: 1, flexDirection: 'column'}}>
                        {/*<Item style={{flexDirection: 'column',justifyContent: 'space-between'}} stackedLabel>*/}

                        {/*<Input placeholderTextColor="rgba(255, 255, 255, 0.6)" placeholder={this.state.placeHolder} textColor='red' value={this.state.fullName} style={{marginTop: 20,color: "black"}} onChangeText={fullName => this.setState({fullName})}/>*/}
                        <Input style={{height: '60%',width: '100%', color: 'red'}} value={this.state.fullName} onChangeText={fullName => this.setState({fullName})}/>
                        {/*</Item>*/}
                    </View>


                    <View style={{height: 40, marginTop: 20}}>

                        <Label style={{fontWeight: 'bold', color: '#d7d7d7'}}>Phone</Label>
                        <View style={{flexDirection: 'row',width: '100%',borderWidth: 1, borderColor: '#d7d7d7', height: 40}}>
                            <View style={{flexDirection: 'row',width: '30%', height: '100%' ,backgroundColor: '#d7d7d7', alignItems: 'center'}}>
                                <Picker style={{width: 100, height: '100%', marginLeft: 5}}
                                        selectedValue={this.state.selectedCountry}
                                        onValueChange={(value)=>this.onCodeChanged(value)}>
                                    <Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
                                        <Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+90.png')}/> +90</Text>} value="+90"/>
                                    <Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
                                        <Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+44.png')}/> +44</Text>} value="+44"/>
                                    <Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
                                        <Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+1.png')}/> +1</Text>} value="+1"/>
                                </Picker>
                            </View>
                            <Input keyboardType={'numeric'} style={{width: '70%', height: '100%'}} value={this.state.phone} onChangeText={(value)=>this.setState({phone: value},()=>console.log("Phone State: ", this.state.phone))}/>
                        </View>

                    </View>

                    <View style={{ width: '100%', borderBottomColor: '#d7d7d7', borderBottomWidth: 1, flexDirection: 'column',marginTop: 30}}>
                        {/*<Item style={{flexDirection: 'column',justifyContent: 'space-between'}} stackedLabel>*/}
                        <Label style={{fontWeight: 'bold', color: '#d7d7d7'}}>Note</Label>
                        {/*<Input placeholderTextColor="rgba(255, 255, 255, 0.6)" placeholder={this.state.placeHolder} textColor='red' value={this.state.fullName} style={{marginTop: 20,color: "black"}} onChangeText={fullName => this.setState({fullName})}/>*/}
                        <Input style={{marginTop: 10}}/>
                        {/*</Item>*/}
                    </View>


                    <Button style={{backgroundColor: '#ff5a00', justifyContent: 'center', width: '100%', height: height/15, marginTop: 20}}>
                        <Text>Added</Text>
                    </Button>


                    <Button style={{backgroundColor: '#ff5a00', justifyContent: 'center', width: '100%', height: height/15, marginTop: 20}}>
                        <Text>Edit</Text>
                    </Button>
                </View>

            </Container>
        );
    }
}

回答1:

After seeing your complete code, I can see you are using the components from NativeBase. If you see the code, it is trying to merge styles and send that to the react native picker.

By looking at the documentation, you are actually setting the styles and I am guessing the native base code is adding another styles which RN does not like.

So, take a look at this documentation, and instead of using the style prop, use the ones provided by the framework:

https://docs.nativebase.io/Components.html#picker-def-headref

See that they have headerStyle, itemStyle, itemTextStyle and textStyle.

回答2:

Text on Android does not allow nested views. Only nested Texts are allowed (they convert to Spans). See this link: https://facebook.github.io/react-native/docs/text.html

来源：https://stackoverflow.com/questions/48478120/can-not-set-image-as-picker-item-label-in-android