選取器不使用in-in-native-elements進行渲染

Question

我正在嘗試將Picker元素（這樣我可以有一個下拉菜單）添加到Header組件（標題是從react-native-elements庫導入的），但是我看不到它，也看不到任何錯誤，任何幫助，將不勝感激。

我已經成功添加了一個矢量圖標，所以我知道標題組件正在按預期工作，但仍在文檔中看不到它。

import React from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Picker,
    ListView
} from 'react-native';
import CoinCell from './js/Components/CoinCell/CoinCell';
import { Header } from 'react-native-elements';
import { getCryptocurrencyData } from './js/NetworkHandler'

export default class CoinCheckerRN extends React.Component {

  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
    this.state = {
      dataSource: dataSource.cloneWithRows([]),
    };

    this._renderRow = this._renderRow.bind(this);
    this._getCoinData = this._getCoinData.bind(this);
    this._renderPicker = this._renderPicker.bind(this);
  }

  componentWillMount() {
    this._getCoinData();
  }

  _getCoinData() {
    getCryptocurrencyData().then(function(result) {

      const ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
      this.setState({
        dataSource: ds.cloneWithRows(result),
        jsonData: result
      });
    }.bind(this))
  }


  _renderRow(data) {
    return (
        <CoinCell coinName={data.name} coinPrice={data.price_gbp} coinPercentageChange={data.percent_change_24h}></CoinCell>        )
  }

  _renderPicker() {
    return (<Picker
        selectedValue={'test'}
        onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
      <Picker.Item label="Java" value="java" />
    </Picker>)
  }

  _renderHeader() {
    return (
        <Header
            leftComponent={<Picker
                selectedValue={this.state.language}
                onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
              <Picker.Item label="Wallet" value="key0" />
            </Picker>}
            rightComponent={{ icon: 'refresh', color: '#FFF' }}
            innerContainerStyles={{ backgroundColor: '#03A9F4'}}
            outerContainerStyles={{ backgroundColor: '#03A9F4'}}
        />)
  }

  render() {
    return (
        <View>
          {this._renderHeader()}
          <ListView
              enableEmptySections
              ref={'resultListView'}
              dataSource={this.state.dataSource}
              renderRow={this._renderRow}
              style={{paddingTop: 64}}
              renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
          />
        </View>
    );
  }
}

Answer 1

我之前遇到過一個非常類似的問題，並定義了拾取器的高度/寬度來修復它。