增加反应本机文本输入的高度和输入底部的输入文本？

Question

这是我的代码：

const StyledTextInput = styled.TextInput`
  background-color: red;
  font-family: SF Pro Text Regular;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  color: #000000;
  align-items: flex-end;
  justify-content: flex-end;
  ${(props) =>
    props.error &&
    `
    border-bottom-color: red;
    border-bottom-width: 1px;
  `};
`;

我基本上想做的是增加文本输入的高度，但是当文本内部的文本居中时，如何使文本在底部显示？

Answer 1

将容器提供给TextInput，并使该容器的行为类似于TextInput。

此外，请使用布局动画以获得更好的体验。

示例代码

import React, { Component } from 'react';
import {
  View, Text, StyleSheet, TextInput, TouchableOpacity, LayoutAnimation, Platform, UIManager
} from 'react-native';

if (Platform.OS === 'android') {
 if (UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }
}

export default class Calls extends Component {
  state={ bigger: false }

  focus=() => {
    this.textInput.focus();
  }

  toggle=() => {
    const { bigger } = this.state;
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    this.setState({ bigger: !bigger });
  }

  render() {
    const { bigger } = this.state;
    return (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={this.focus}
          style={[styles.inputContainer, { height: bigger ? 200 : 60 }]}
          activeOpacity={1}
        >
          <TextInput
            ref={(e) => { this.textInput = e; }}
            defaultValue="ASWIN"
            style={styles.input}
          />
        </TouchableOpacity>
        <TouchableOpacity onPress={this.toggle}>
          <Text style={styles.toggle}>Toggle</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  inputContainer: {
    width: '90%', justifyContent: 'flex-end', borderWidth: 1,
  },
  input: {
    fontSize: 20, height: 50, width: '100%', padding: 0, paddingHorizontal: 10,
  },
  toggle: {
    fontSize: 20,
    marginTop: 10,
    backgroundColor: '#00000099',
    paddingHorizontal: 10,
    paddingVertical: 5,
    color: '#fff',
  },
});