反应本机键盘避免视图

Question

我正在尝试在底部的文本输入旁边实现一个 cmets 的平面列表。但是，当我尝试将文本输入放置在键盘避免视图中以便将其推到顶部以查看正在输入的输入时，它不会进入顶部并停留在底部。这是我的代码：

render() {
    return (
      <KeyboardAvoidingView enabled behavior='padding' style={styles.container}>
      <View style={styles.commentStyles}>
        <FlatList
          keyExtractor={(item) => JSON.stringify(item.date)}
          data={this.props.post.comments}
          renderItem={({item}) => (
            <View style={[styles.row, styles.commentContainer]}>
              <Image style={styles.roundImage} source={{uri: item.commenterPhoto}}/>
              <View style={[styles.left]}>
                <Text>{item.commenterName}</Text>
                <Text style={styles.commentText}>{item.comment}</Text>
                </View>
            </View>
          )}
        />
          <TextInput
            style={styles.input}
            onChangeText={(comment) => this.setState({comment})}
            value={this.state.comment}
            returnKeyType='send'
          placeholder='Add Comment'
            onSubmitEditing={this.postComment}
          />
      </View>
      </KeyboardAvoidingView>
    );
  }

我的容器只应用了一个 flex: 1 样式。我尝试通读 KeyboardAvoidingView 的文档，但发现它非常混乱。如果你们能以任何方式帮助我，将不胜感激！

Answer 1

试试这个。

    import React, {Component} from 'react';
    import {
      StyleSheet,
      Text,
      View,
      KeyboardAvoidingView,
      Platform,
      Dimensions,
      TextInput
    } from 'react-native';
    
    const {height: fullHeight} = Dimensions.get('window');
    
    class Comment extends Component {
      constructor(props) {
        super(props);
        this.state = {
          pageOffset: 0,
        };
      }
    
      onLayout = ({
        nativeEvent: {
          layout: {height},
        },
      }) => {
        const pageOffset =
          fullHeight - height;
        this.setState({pageOffset});
      };
    
      render() {
        return (
          <View style={styles.viewContainer} onLayout={this.onLayout}>
            <KeyboardAvoidingView
              style={styles.container}
              keyboardVerticalOffset={this.state.pageOffset}
              behavior={Platform.OS === 'ios' ? 'padding' : null}>
              


        <FlatList
          keyExtractor={(item) => JSON.stringify(item.date)}
          data={this.props.post.comments}
          renderItem={({item}) => (
            <View style={[styles.row, styles.commentContainer]}>
              <Image style={styles.roundImage} source={{uri: item.commenterPhoto}}/>
              <View style={[styles.left]}>
                <Text>{item.commenterName}</Text>
                <Text style={styles.commentText}>{item.comment}</Text>
                </View>
            </View>
          )}
        />
          <TextInput
            style={styles.input}
            onChangeText={(comment) => this.setState({comment})}
            value={this.state.comment}
            returnKeyType='send'
          placeholder='Add Comment'
            onSubmitEditing={this.postComment}
          />
            </KeyboardAvoidingView>
          </View>
        );
      }
    }
    
    export default Comment;
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'space-between',
      },
      viewContainer: {
        flex: 1,
      },

});