无法设置< Image>在Android中作为Picker.Item标签 [英] Can not set <Image> as Picker.Item label in Android

问题描述

对于我的本机应用程序，我需要Picker.Item的label中的Image + Text，如下图所示.

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

在IOS上一切正常，但在Android上却出现错误.

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

这是我的Picker组件代码.

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>

这是我在Android上看到的错误屏幕

here is the error screen I get on Android

我被困在这里24小时，请帮助我.

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

这是整个文件-Leads.JS

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>
        );
    }
}

Android上的

推荐答案

文本不允许嵌套视图.仅允许嵌套的文本(它们会转换为Spans). 看到此链接: https://facebook.github.io/react-native/docs/text.html

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

这篇关于无法设置< Image>在Android中作为Picker.Item标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！