Question

如何使用Picker作为按钮渲染导航栏（NativeBase上的Header），当我单击此按钮时，Picker将打开如下：

我尝试了这个例子，但似乎Picker没有显示在Header上：

<Right>
  <View>
    <Picker
      mode="dropdown">
      <Item label="Wallet" value="key0" />
      <Item label="ATM Card" value="key1" />
    </Picker>
  </View>
</Right>

Answer 1

只需使用ToolbarAndroid代替

Answer 2

{this._renderButtonBack（disableBack，onBack）}

<Title style={{alignSelf:'center', color:'white'}}>{title}</Title>

<Right style={{alignSelf:'center', color:'white'}}>
    <Button style={{backgroundColor:colors.pramiryColor, justifyContent:'flex-end',alignItems:'flex-end',
                    shadowOffset: { width: 0, height: 0 },shadowColor: 'transparent',shadowOpacity: 0,
                    elevation: 0}}>
        <Picker
            mode="dropdown"
            iosHeader={iosHeader}
            iosIcon={<Icon name="ios-arrow-down-outline" />}
            style={{height:35,
                color:'white',
                width: Platform.OS === 'ios'? '30%':'35%', backgroundColor:colors.pramiryColor}}
            selectedValue={currentStatus}
            onValueChange={onStatusChanged}>
            {itemPickers}
        </Picker>
    </Button>
</Right>

Answer 3

我终于可以使用react-native-material-dropdown获得非常接近的结果导入后，数据对象已设置为所需的值（我使用过“保存”，“删除”，“取消”），则可以使用以下代码/设置

<Right>
  <Button transparent>
    <Icon name="md-more" style={{ color: '#fff' }} />
  </Button>
  <Dropdown
    label=""
    data={data}
    containerStyle={{
      opacity: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.0)',
      top: 4,
      right: -10,
      color: 'white',
      position: 'absolute',
      height: Platform.OS === 'android' ? 48 : 52,
      width: 70,
    }}
    pickerStyle={{
      marginTop: 60,
      marginRight: 40,
    }}
    overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.27)' }}
    dropdownOffset={{ top: 0, left: 0 }}
    dropdownPosition="1"
    itemColor="rgba(0, 0, 0, .87)"
    selectedItemColor="rgba(0, 0, 0, .87)"
  />
</Right>;

React Native / Native Base如何在导航栏上渲染Picker？

3 个答案: