Question

我正在尝试进行1：1聊天，但是当我尝试点击TextInput时，KeyboardAvoidingView无法正常工作，我不确定这是否与我的风格有关，或者我是否使用不正确，请在此处您可以找到我的snack

这是代码：

export default class App extends React.Component {

constructor(props) {
  super(props);
  this.state = { 
    placeholder: 'Write a message...',
    text: ''
    };
}

render() {
  return (
      <KeyboardAvoidingView style={{flex: 1, marginTop: 20}} behavior="padding" enabled>
        <View style={styles.messageView}>
          <Message
            message="Hi! First Message"
            styleMessage={'one'}
          />
          <Message
            message="Hi! Second Message"
            styleMessage={'two'}
          />
        </View>
        <View style={styles.container}>
          <View style={styles.inputContainer}>
            <TextInput
              style={styles.textInput}
              selectionColor={BLUE}
              placeholderTextColor={LIGHT_GRAY}
              onChangeText={(text) => this.setState({text})}
              placeholder={this.state.placeholder}
              value={this.state.text}
              onEndEditing={() => {console.log(1+1)}}
            />
          </View>
          <TouchableHighlight style={styles.sendButton}>
            <Ionicons name="md-send" size={25} color='#FFFFFF' style={{textAlign: 'center'}}/>
          </TouchableHighlight>
        </View>


      </KeyboardAvoidingView>
  );
}

}

Answer 1

在这种情况下，您只需更改

行为= “填充”

对于

behavior =“ height”

，它将在两种平台（Android / iOS）上都能正常工作

我个人建议您改用react-native-keyboard-aware-scroll-view软件包（Link）中的KeyboardAwareScrollView，因为它可以让您更轻松，更快速地配置它的行为。

为什么KeyboardAvoidingView组件不起作用？

1 个答案: