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占用尽可能多的空间而不会溢出。为了解决该问题，我将maxHeight属性设置为200。目前效果很好，但是如果有人想出更好的解决方案，我将保留这个问题

多行FormInput元素不在屏幕上

2 个答案: