当按钮贴在React-Native底部时，如何垂直对齐下拉菜单？

Question

当我底部有一个“下一步”按钮时，我试图垂直对齐选择下拉列表。我想出的样式适用于静态输入框或单选按钮，但是当我单击它时选择下拉列表就会移动-它与我设置flex属性的方式有关，但是我正在寻求帮助以找出一种方法来解决问题。

Screen.js

  render() {
    return (
      <View style={styles.listContainer}>
        <View style={styles.emptySpace}></View>
        <View>
          <Text style={styles.title}>CURRENT GRADE LEVEL</Text>
        </View>
        <View>
          <Form style={styles.formStyle}
            ref="form"
            type={this.getForm()}
            options={this.getFormOptions()}
            value={this.lastValues}
          />
        </View>
        <View style={styles.errorTextWrap}><Text style={styles.errorText} >{ this.state.errorText } </Text></View>
        <View style={styles.buttonWrapper}>
          <TouchableHighlight style={styles.button} onPress={this.onPress.bind(this)}>
            <Text style={styles.buttonText}>NEXT STEP</Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }

Styles.js

  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
    paddingBottom: 10,
    color: '#09c',
    fontFamily: 'SofiaProBold',
    textAlign: 'center'
  },
  listContainer:{
    paddingTop: 20,
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 40,
    backgroundColor: '#e1f3ff',
    flex: 1
  },
  buttonText: {
    fontSize: 20,
    textAlign: 'center',
    color: 'white'
  },
  button: {
    backgroundColor: 'orange',
    borderColor: 'transparent',
    borderWidth: 8,
    borderRadius: 8,
    paddingTop: 10,
    paddingRight: 10,
    paddingBottom: 10,
    paddingLeft: 10,
    marginBottom: 30
  },
  emptySpace: {
    flex: 1,
    marginTop: 30
  },
  buttonWrapper: {
    flex: 1,
    justifyContent: 'flex-end'
  }

我希望单击时不要使选择框垂直向上移动。

我希望对解决方案提出任何建议或答案。预先谢谢你！