如何在react native中在选择器元素的左侧显示图标?

时间:2019-05-21 21:44:17

标签: react-native

我试图在react native中将图标添加到Picker元素的左侧,但是当我这样做时,Picker元素会失去Picker元素的行为并用作Textinput字段。

这是使Picker组件的行为类似于textinput字段的代码:

<Item stackedLabel>
    <Icon name='md-information-circle' />
    <Label style={{fontWeight:'600'}}>
        GOAL
    </Label>
    <Picker
        mode="dropdown"
        iosIcon={<Icon name="arrow-down" />}
        headerStyle={{ backgroundColor: "black" }}
        headerBackButtonTextStyle={{ color: "#fff" }}
        headerTitleStyle={{ color: "#fff" }}
        selectedValue={this.state.goal}
        onValueChange={value => {
            this.setState({
                goal: value,
            });
        }}
        >
        <Picker.Item label="Cut/Lose Fat" value="cut" />
        <Picker.Item label="Bulk/Gain Weight" value="bulk" />
        <Picker.Item label="Maintain" value="maintain" />
    </Picker>
</Item>

此代码应作为Picker元素使用,但一旦添加了注释行,便会像上一个示例一样工作,即textinput ...

<Item stackedLabel>
    {/* <Icon name='md-information-circle' /> */}
    <Label style={{fontWeight:'600'}}>
        ACTIVITY LEVEL
    </Label>
    <Picker
        mode="dropdown"
        iosIcon={<Icon name="arrow-down" />}
        headerStyle={{ backgroundColor: "black" }}
        headerBackButtonTextStyle={{ color: "#fff" }}
        headerTitleStyle={{ color: "#fff" }}
        selectedValue={this.state.activityLevel}
        onValueChange={value => {
            this.setState({
                activityLevel: value,
            });
        }}
        >
        <Picker.Item label="Light" value="light" />
        <Picker.Item label="Moderate" value="moderate" />
        <Picker.Item label="Active" value="active" />
    </Picker>
</Item>

它是这样的:https://snag.gy/I3t0Xx.jpg

0 个答案:

没有答案