我有一个来自 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;