使用keyboardawarescrollview反应本机无法滚动

时间:2021-05-16 15:28:34

标签: react-native expo

我有一个来自 react-navigation 的标题。我有 2 个视图,例如 Whatsapp 聊天。顶部的一个视图是聊天,另一个视图位于底部,您可以在其中编写文本和发送文本。

我的问题是如果我点击我的文本输入字段,我无法滚动。如果我删除 flex 1,那么我可以滚动。但问题是如果我离开 textinput 字段,我可以再次滚动,所以我的视图不像 flex 1 那样固定。

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, TextInput, View, TouchableOpacity, useWindowDimensions } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { AntDesign, Ionicons } from '@expo/vector-icons';

const Room = () => {
  const width = useWindowDimensions().width;
  const height = useWindowDimensions().height;

  return (
    <KeyboardAwareScrollView style={{flex: 1}}>
      <View style={{height: height - 150,backgroundColor: '#fff'}}>
        <Text style={styles.title}>Storys</Text>
      </View>
      <View style={{height: 150, backgroundColor: '#fff', justifyContent:'space-between', flexDirection: 'row'}}>
        <TouchableOpacity>
          <AntDesign name="pluscircleo" size={32} color="#333" />
        </TouchableOpacity>
        <TextInput numberOfLines={4} placeholder="Gebe eine Nachricht ein..." />
        <TouchableOpacity style={{padding: 8, paddingLeft: 10, paddingRight: 10, backgroundColor: 'purple'}}>
          <Ionicons name="paper-plane-outline" size={32} color="#fff" />
        </TouchableOpacity>
      </View>
    </KeyboardAwareScrollView>
  )
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  title: {
    color: '#555',
    fontSize: 15,
    padding: 8
  }
});

export default Room;

0 个答案:

没有答案