我试图在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>