react-native - 反应选择器下方的本机按钮

Question

我为 iOS 创建了一个 react 本机应用程序，我想在选择器下方放置一个加载按钮。目前我在模拟器上得到以下输出。有人知道如何将按钮放在选择器下方吗？如果任何有 react-native 经验的人可以提供帮助，我将非常感激。

我的代码如下：

    import React, { Component } from 'react';
import { View, Text, Button, StyleSheet, ScrollView, Picker} from 'react-native';

export class LayerSelection extends Component {

  loadLayer = () => {

  }

  constructor(props){
    super(props);
    this.state = {
      layer: ''
    };
  }

    static navigationOptions =
    {
         title: 'Layer Selection',
    };

  render() {

    return (
        <View style={styles.container}>
          <Picker
            selectedValue={this.state.layer}
            itemStyle = {{fontSize: 15}}
            style={{ height: 50, width: 400}}
            onValueChange={(itemValue, itemIndex) => this.setState({layer: itemValue})}>
            <Picker.Item label="Fires" value="fires" />
            <Picker.Item label="Fire Risk 24" value="fireRisk24" />
            <Picker.Item label="Fire Risk 48" value="fireRisk48" />
            <Picker.Item label="Fire Risk 72" value="fireRisk72" />
            <Picker.Item label="Snow Cover" value="snowCover" />
            <Picker.Item label="Earthquakes" value="earthquakes" />
            <Picker.Item label="Land Surface Temperature" value="lst" />
            <Picker.Item label="Leaf Area Index" value="lai" />
            <Picker.Item label="Fraction Vegetation Cover" value="fvc" />
            <Picker.Item label="Absorbed Photosynthetical Active Radiation" value="fapar" />
            <Picker.Item label="Landslides" value="landslides" />
            <Picker.Item label="Lightnings" value="lightnings" />
            <Picker.Item label="Ozone" value="ozone" />
            <Picker.Item label="Evapotranspiration" value="et" />
            <Picker.Item label="Albedo" value="albedo" />
            <Picker.Item label="SO2" value="so2" />
            <Picker.Item label="NO2" value="no2" />
            <Picker.Item label="HCHO" value="hcho" />
          </Picker>
          <Button title="Load" onPress={this.loadLayer} style={styles.buttonStyle} />
        </View>

    );
  }
}

export default LayerSelection;

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#fff',
  },
  buttonStyle:{
    alignSelf:'center'
  }
});

标签： react-nativebuttonalignmentpicker

Answer 1

我刚刚删除了您在 上的样式Picker，您可能想检查一下。这似乎有效：

<View style={styles.container}>

      <Picker
        selectedValue={this.state.layer}
        itemStyle = {{fontSize: 15}}
        onValueChange={(itemValue, itemIndex) => this.setState({layer: itemValue})}>
        <Picker.Item label="Fires" value="fires" />
        <Picker.Item label="Fire Risk 24" value="fireRisk24" />
        <Picker.Item label="Fire Risk 48" value="fireRisk48" />
        <Picker.Item label="Fire Risk 72" value="fireRisk72" />
        <Picker.Item label="Snow Cover" value="snowCover" />
        <Picker.Item label="Earthquakes" value="earthquakes" />
        <Picker.Item label="Land Surface Temperature" value="lst" />
        <Picker.Item label="Leaf Area Index" value="lai" />
        <Picker.Item label="Fraction Vegetation Cover" value="fvc" />
        <Picker.Item label="Absorbed Photosynthetical Active Radiation" value="fapar" />
        <Picker.Item label="Landslides" value="landslides" />
        <Picker.Item label="Lightnings" value="lightnings" />
        <Picker.Item label="Ozone" value="ozone" />
        <Picker.Item label="Evapotranspiration" value="et" />
        <Picker.Item label="Albedo" value="albedo" />
        <Picker.Item label="SO2" value="so2" />
        <Picker.Item label="NO2" value="no2" />
        <Picker.Item label="HCHO" value="hcho" />
      </Picker>


      <Button title="Load" onPress={this.loadLayer} style={styles.buttonStyle} />

</View>