react-native - React Native / Native Base 如何在导航栏上呈现选取器？

Question

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

我尝试了这个例子，但似乎选择器没有显示在标题上：

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

Answer 1

{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 2

只需使用ToolbarAndroid代替

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