React Native如何修复底部的东西

Question

我正在 RN 中创建一个自定义选择器，并希望选择器从屏幕底部出现

下图显示了它目前的外观。

将此视为我当前 Picker 组件的代码（子组件）

import React, {useState} from 'react'
import PropTypes from 'prop-types'
import {View, Picker, StyleSheet, Dimensions} from 'react-native'

const styles = StyleSheet.create({
    pickerDefault:{
      flex: 1,
      position: 'absolute',
      width: Dimensions.get('window').width,
      bottom: 0
    }
})

const RNPicker = (props) => {
  return (

      <Picker
        selectedValue={'js'}
        style={styles.pickerDefault}>
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
    </Picker>

  )
}

RNPicker.propTypes =  {

}

export default RNPicker

如何让 Picker 粘在屏幕底部？

这就是我在父组件中呈现代码（不想更改此代码）的方式

<View style={{backgroundColor: backgroundViewColor, height: '100%'}}>  
<Spinner
  visible={Loading} />
  <ProgressBar {...ProgressBarProps} />
    <View style={styles.renderComponentView}>
      <Text style={[{color: defaultColor}, styles.textStyling, textStyle]}> {label}</Text>
      {CustomPicker}
       { Error.status ?  (<Text style={[styles.subText, styles.errorColor,  helperTextStyle]}>{Error.message}</Text>): null }
      <Text style={[styles.subText, errorStyle]}>{helper}</Text>
      <TouchableOpacity 
        style={[{borderColor: defaultColor, color: defaultColor}, styles.customButton]}
        onPress={getValueFromState}
        > 
        <Text style={[{borderColor: defaultColor, color: defaultColor},styles.buttonText, buttonTextStyle]}> {usedButtonText} </Text> 
      </TouchableOpacity>
  </View>
</View>

Answer 1

我看到了你的问题，我正在努力解决它，请试试这个：

<View style={{ position: "absolute", bottom: 0, flex: 1 }}>
        {< CustomPicker/>}
</View>

通过替换您的{customPicker}