Question

我为iOS创建了一个react native应用，我想在选择器下方放置一个加载按钮。目前，我在模拟器上得到了以下output。有人知道如何将按钮放置在选择器下方吗？如果有经验丰富的本地反应人员能够提供帮助，我将真的很荣幸。

我的代码如下：

    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'
  }
});

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>

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

1 个答案: