多行 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 替换您的视图。

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

Answer 2

我找到了至少目前有效的答案。理想的情况是让 FormInput 尽可能多地占用 space 而不会溢出。为了解决这个问题，我将 maxHeight 属性设置为 200。目前效果很好，但我会保留这个问题，以防有人提出更好的解决方案

多行 FormInput 元素离开屏幕

multiline FormInput element goes off screen

css

styling

jsx

reactjs

react-native