react-native - React Native / Native Base navbarでピッカーをレンダリングする方法は?

Question

このボタンをクリックすると、ピッカーが次のように開きます。

例を試してみましたが、ピッカーがヘッダーに表示されないようです:

<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

私は最終的に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>;