Question

我正在尝试在底部的textinput旁边实现评论的平面列表。但是，当我尝试将textinput放在键盘中并避开视图，以便将其推到顶部以查看正在键入的输入时，它不会转到顶部，而是停留在底部。这是我的代码：

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

我的容器只有一个柔韧性：对其应用了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,
      },

});

反应本机键盘避免视图

1 个答案: