css - 多行 FormInput 元素离开屏幕

Question

我已经为带有 react-native-elements 的表单创建了一个简单的弹出窗口。问题是第二个表单输入是多行的，如果文本行太多，元素会溢出到弹出窗口底部之外，将提交按钮推离屏幕。一个好处是让提交按钮将自己定位在弹出窗口的底部。这是代码，为了方便起见，我还把它嵌入了零食中 https://snack.expo.io/HyZPSSj8m

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

import { Card, FormLabel, FormInput, FormValidationMessage, Button } from 'react-native-elements';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Card containerStyle={styles.popup} title="Add text">

              <FormLabel>Title</FormLabel>
              <FormInput inputStyle={{width: undefined}}/>

              <FormLabel>Text</FormLabel>
              <FormInput multiline numberOfLines={5} inputStyle={{width: undefined}} />
              <Button buttonStyle={styles.popupButton} title="Submit" />
          </Card>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch'
  },
  popup: {
    position: 'absolute',
    top: 0,
    bottom: 10,
    left: 0,
    right: 0,
    alignItems: 'stretch',
    flex: 1
  },
  popupButton: {
    borderRadius: 0, 
    marginLeft: 0, 
    marginRight: 0, 
    marginBottom: 10,
    marginTop: 10
  }
});

Answer 1

您可以用 ScrollView 替换您的 View 。

 export default class App extends React.Component {
  render() {
    return (
     <ScrollView style={styles.container}>
       <Card containerStyle={styles.popup} title="Add text">

          <FormLabel>Title</FormLabel>
          <FormInput inputStyle={{width: undefined}}/>

          <FormLabel>Text</FormLabel>
          <FormInput multiline numberOfLines={5} inputStyle={{width: undefined}} />
          <Button buttonStyle={styles.popupButton} title="Submit" />
      </Card>
     </ScrollView>
    );
   }
  }