如何使用 react-native 打开列表中的键盘

Question

我正在尝试在我的应用程序中实现聊天，但是当我打开键盘开始对话时，对话会从视图中释放。

当你不打开它时找不到谈论用户的视图。 whatsapp 应用究竟是什么？

这是我的代码和正在发生的事情的 gif。

https://i.stack.imgur.com/KyExS.gif

import React, { Component } from 'react';
import { View, Text, TextInput, TouchableOpacity, ListView, StyleSheet, Image, ScrollView, Dimensions } from 'react-native';
import { connect } from 'react-redux';
import { Container } from 'native-base';
import Conversation from '../services/conversation';
import Imagens from '../../../imagens';


class Chat extends Component {
  constructor() {
    super();
    this.state = {
      conversationHistory: [],
      mensagem: ''
    };
   }

  sendMessage(text) {

    Conversation.message({
      text
    }).then(r => {
      if (r != null && r !== undefined) {
        r.data_iteracao = new Date().getHours() + ':' + new Date().getMinutes();
        this.state.conversationHistory.push(r);
        this.setState({
          conversationHistory: this.state.conversationHistory
        });
      }
    });
  }

  renderRow(texto) {
    return (
      <View style={styles.item}>
        <View style={[{ alignItems: 'flex-end' }]}>
          <View style={[styles.balloon, { alignItems: 'flex-end', backgroundColor: '#dbf5b4', elevation: 1, padding: 5, borderRadius: 8 }]}>
            <Text style={{ fontSize: 14, color: '#000', }}>{texto.input.text}</Text>
            <View style={{ alignItems: 'flex-end', alignSelf: 'flex-end' }}>
              <Text style={{ fontSize: 10, color: '#000' }}>{texto.data_iteracao}</Text>
            </View>
          </View>
        </View>

        <View style={[{ alignItems: 'flex-start', borderRadius: 20 }]}>
          <View style={[styles.balloon, { alignItems: 'flex-start', backgroundColor: '#f7f7f7', elevation: 1, padding: 5, borderRadius: 8 }]}>
            <Text style={{ fontSize: 14, color: '#000' }}>{texto.output.text}</Text>
            <View style={{ alignItems: 'flex-end', alignSelf: 'flex-end' }}>
              <Text style={{ fontSize: 10, color: '#000' }}>{texto.data_iteracao}</Text>
            </View>
          </View>
        </View >
      </View >
    );
  }

  render() {
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

    return (

      <View style={styles.container}>

        <ListView
          enableEmptySections
          dataSource={ds.cloneWithRows(this.state.conversationHistory)}
          renderRow={this.renderRow}
          renderScrollComponent={props => <ScrollView {...props} />}
          onEndReachedThreshold={10}
          ref={ref => this.listView = ref}
          onContentSizeChange={(contentWidth, contentHeight) => {
            this.listView.scrollToEnd({ animated: false });
          }} />


        <View style={styles.footer}>
          <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
              placeholder="digite a mensagem..."
              underlineColorAndroid='transparent'
              value={this.state.mensagem}
              onChangeText={(mensagem) => this.setState({ mensagem })} />
          </View>

          <TouchableOpacity style={styles.btnSend} onPress={() => this.sendMessage(this.state.mensagem)}>
            <Image source={Imagens.send} style={styles.iconSend} />
          </TouchableOpacity>
        </View>
      </View>

    );
  }

}

export default connect()(Chat);

Answer 1

我认为您应该将 KeyboardAvoidingView 添加到视图中：

return (

   <KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
      <View style={styles.container}>

        <ListView
          enableEmptySections
          dataSource={ds.cloneWithRows(this.state.conversationHistory)}
          renderRow={this.renderRow}
          renderScrollComponent={props => <ScrollView {...props} />}
          onEndReachedThreshold={10}
          ref={ref => this.listView = ref}
          onContentSizeChange={(contentWidth, contentHeight) => {
            this.listView.scrollToEnd({ animated: false });
          }} />


        <View style={styles.footer}>
          <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
              placeholder="digite a mensagem..."
              underlineColorAndroid='transparent'
              value={this.state.mensagem}
              onChangeText={(mensagem) => this.setState({ mensagem })} />
          </View>

          <TouchableOpacity style={styles.btnSend} onPress={() => this.sendMessage(this.state.mensagem)}>
            <Image source={Imagens.send} style={styles.iconSend} />
          </TouchableOpacity>
        </View>
      </View>
     </KeyboardAvoidingView>

    );