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

我之前遇到了类似的问题，并定义了拾取器高度/宽度。

Picker不会使用react-native-elements进行渲染

1 个答案: