React native 键盘避免查看键盘顶部的空白区域
有人知道为什么当键盘打开时，键盘顶部有一个空白区域吗？无论我将paddingBottom设置为什么值。当键盘打开时，它的顶部总是有一个白色区域。设置为paddingBottom的值越小，键盘上的空白就会越小。但是，无论将什么值设置为paddingBottom。空白永远不会消失React native 键盘避免查看键盘顶部的空白区域,react-native,expo,React Native,Expo,有人知道为什么当键盘打开时，键盘顶部有一个空白区域吗？无论我将paddingBottom设置为什么值。当键盘打开时，它的顶部总是有一个白色区域。设置为paddingBottom的值越小，键盘上的空白就会越小。但是，无论将什么值设置为paddingBottom。空白永远不会消失 import React, { Component } from "react"; import { ScrollView, StyleSheet, View, FlatList, TouchableO
import React, { Component } from "react";
import {
ScrollView,
StyleSheet,
View,
FlatList,
TouchableOpacity,
Image,
Dimensions,
Linking,
Platform,
KeyboardAvoidingView,
SafeAreaView,
Animated,
Keyboard
} from "react-native";
import ReadMore from "react-native-read-more-text";
import Carousel, {
ParallaxImage,
Pagination
} from "react-native-snap-carousel";
import Modal from "react-native-modal";
import {
Container,
Header,
Content,
Button,
Text,
Thumbnail,
Badge,
Icon,
Input
} from "native-base";
import MapView from "react-native-maps";
const { width, height } = Dimensions.get("window");
class EventScreen extends Component {
state = {
images: [
"https://source.unsplash.com/1024x768/?nature",
"https://source.unsplash.com/1024x768/?water",
"https://source.unsplash.com/1024x768/?girl",
"https://source.unsplash.com/1024x768/?tree"
],
activeSlide: 0,
isKeyboardShow: false
};
constructor(props) {
super(props);
this.keyboardHeight = new Animated.Value(0);
}
componentWillMount() {
this.keyboardWillShowSub = Keyboard.addListener(
"keyboardWillShow",
this.keyboardWillShow
);
this.keyboardWillHideSub = Keyboard.addListener(
"keyboardWillHide",
this.keyboardWillHide
);
}
componentWillUnmount() {
this.keyboardWillShowSub.remove();
this.keyboardWillHideSub.remove();
}
keyboardWillShow = event => {
this.setState({ isKeyboardShow: true });
Animated.timing(this.keyboardHeight, {
duration: event.duration,
toValue: event.endCoordinates.height
}).start(() => {
console.log("keyboard height:", this.keyboardHeight);
});
};
keyboardWillHide = event => {
Animated.timing(this.keyboardHeight, {
duration: event.duration,
toValue: 0
}).start(() => {
console.log("keyboard height:", this.keyboardHeight);
this.setState({ isKeyboardShow: false });
});
};
_renderTruncatedFooter = handlePress => {
return (
<Text style={{ color: "#ff6666", marginTop: 5 }} onPress={handlePress}>
Read more
</Text>
);
};
_renderRevealedFooter = handlePress => {
return (
<Text style={{ color: "#ff6666", marginTop: 5 }} onPress={handlePress}>
Show less
</Text>
);
};
_handleTextReady = () => {};
getLat = latLng => {
return parseFloat(latLng.split(",")[0]);
};
getLng = latLng => {
return parseFloat(latLng.split(",")[2]);
};
getMapUrls = (latLng, proximity) => {
const scheme = Platform.select({
ios: "maps:0,0?q=",
android: "geo:0,0?q="
});
const _latLng = `${this.getLat(latLng)},${this.getLng(latLng)}`;
const label = proximity;
//index 0 contains appleMapUrl 1 contains googleMapUrl
return [`${scheme}${label}@${_latLng}`, `${scheme}${_latLng}(${label})`];
};
openMap = (appleMapUrl, googleMapUrl) => {
if (Platform.OS === "ios") {
Linking.canOpenURL(appleMapUrl).then(supported => {
if (supported) {
return Linking.openURL(googleMapUrl);
} else {
return Linking.openURL(appleMapUrl);
}
});
} else {
Linking.openURL(googleMapUrl);
}
};
_renderPhotoItem({ item, index }, parallaxProps) {
return (
<View style={styles.item}>
<ParallaxImage
source={{ uri: item }}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
</View>
);
}
get pagination() {
const { images, activeSlide } = this.state;
return (
<Pagination
dotsLength={images.length}
activeDotIndex={activeSlide}
containerStyle={{
marginTop: -height * 0.08
}}
dotStyle={{
width: 10,
height: 10,
borderRadius: 5,
marginHorizontal: 8,
backgroundColor: "rgba(255, 255, 255, 0.92)"
}}
inactiveDotStyle={
{
// Define styles for inactive dots here
}
}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
/>
);
}
render() {
const { categories } = this.props;
let mapUrls = this.getMapUrls("-37.8181917,144.961775", "图书馆");
let appleMapUrl = mapUrls[0];
let googleMapUrl = mapUrls[2];
let inputHeight = this.keyboardHeight;
// const inputInterpolateValue = this.keyboardHeight.interpolate({
// inputRange: [0, 1],
// outputRange: [0, 1]
// });
return (
<Animated.View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
paddingBottom: this.keyboardHeight
}}
>
<View style={{ width: "90%" }}>
<ScrollView>
<View>
<View style={styles.titlePictureRow}>
<Thumbnail
square
source={{
uri: "https://source.unsplash.com/1024x768/?nature"
}}
style={{
borderRadius: 10,
width: width * 0.25,
height: width * 0.25
}}
/>
<View style={styles.titlePictureIntroSection}>
<Text style={styles.titlePictureIntroSectionTitle}>
图书馆学习
</Text>
</View>
</View>
<Text style={styles.eventTitle}>图书馆学习</Text>
</View>
<View style={styles.goingSection}>
<View style={styles.goingSectionContentContainer}>
<View style={styles.goingSectionContentRow}>
<Text style={{ fontSize: 16 }}>加入申请</Text>
<View style={styles.goingSectionApplyContainer}>
<Badge
primary
style={{
width: 50,
height: 50,
borderRadius: 25,
alignItems: "center"
}}
>
<Icon name="ios-add" style={{ color: "#fff" }} />
</Badge>
</View>
</View>
</View>
</View>
<View style={styles.eventDetailsSection}>
<View style={styles.eventDetailsSectionRow}>
<Icon
name="access-time"
type="MaterialIcons"
style={{ color: "#b4b4b4" }}
/>
<View style={styles.eventDetailsSectionRowWordingSection}>
<Text>星期三, 04/09/2019</Text>
<Text style={styles.eventDetailsSectionRowWordingSectionTime}>
5:30pm - 8:15pm
</Text>
</View>
</View>
<View style={styles.eventDetailsSectionRow}>
<Icon
name="location-on"
type="MaterialIcons"
style={{ color: "#b4b4b4" }}
/>
<View style={styles.eventDetailsSectionRowWordingSection}>
<Text>31 Queen St</Text>
<Text style={styles.eventDetailsSectionRowWordingSectionTime}>
31 Queen St, Melbourne, Australia
</Text>
</View>
</View>
<View
style={[
styles.eventDetailsSectionRow,
{ alignItems: "center" }
]}
>
<Icon
name="user"
type="AntDesign"
style={{ color: "#b4b4b4" }}
/>
<View
style={[
styles.eventDetailsSectionRowWordingSection,
{
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
}
]}
>
<Text>Bruce He</Text>
<Thumbnail
style={{ marginLeft: 20 }}
small
source={{
uri: "https://source.unsplash.com/1024x768/?boy"
}}
/>
</View>
</View>
</View>
<View style={styles.memberSection}>
<Text>35人参与活动</Text>
<View style={styles.memberRow}>
{[1, 2, 3, 4, 5, 6].map(item => {
return (
<Thumbnail
key={item}
style={{ marginVertical: 10, marginRight: 5 }}
small
source={{
uri: "https://source.unsplash.com/1024x768/?girl"
}}
/>
);
})}
</View>
</View>
<View style={styles.eventDescriptionSection}>
<ReadMore
numberOfLines={3}
renderTruncatedFooter={this._renderTruncatedFooter}
renderRevealedFooter={this._renderRevealedFooter}
onReady={this._handleTextReady}
>
<Text
style={styles.cardText}
>{`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`}</Text>
</ReadMore>
</View>
<View>
<MapView
region={{
latitude: -37.8181917,
longitude: 144.961775,
latitudeDelta: 0.0012,
longitudeDelta: 0.0021
}}
style={{
width: "100%",
height: 250,
borderRadius: 10
}}
>
<MapView.Marker
coordinate={{
longitude: 144.961775,
latitude: -37.8181917
}}
title={"图书馆"}
description={"赶快加入"}
/>
<Icon
type="Ionicons"
style={{
color: "#f66",
right: 30,
bottom: 20,
fontSize: 35,
position: "absolute"
}}
name="md-navigate"
onPress={() => this.openMap(appleMapUrl, googleMapUrl)}
/>
</MapView>
</View>
<View style={styles.photoSection}>
<Text style={styles.sectionTitle}>活动图片</Text>
<View>
<Carousel
loop={true}
autoplay={true}
autoplayDelay={500}
autoplayInterval={30000}
sliderWidth={width}
sliderHeight={width}
itemWidth={width}
data={this.state.images}
renderItem={this._renderPhotoItem}
hasParallaxImages={true}
onSnapToItem={index => this.setState({ activeSlide: index })}
/>
{this.pagination}
</View>
</View>
<View style={styles.commentsSection}>
<Text style={styles.sectionTitle}>评论</Text>
<View style={styles.commentInputSection}>
<Thumbnail
small
source={{
uri: "https://source.unsplash.com/1024x768/?nature"
}}
/>
<Input
placeholder="输入评论..."
style={{
borderWidth: 0.5,
borderRadius: 10,
marginLeft: 10,
marginVertical: 5
}}
/>
</View>
<View style={styles.commentContainer}>
<View style={styles.commentCardItem}>
<Thumbnail
small
source={{
uri: "https://source.unsplash.com/1024x768/?nature"
}}
/>
<View style={styles.commentContentContainer}>
<Text style={{ fontWeight: "bold" }}>Arun Chandran</Text>
<Text style={{ marginVertical: 3, color: "#b4b4b4" }}>
11 Jun., 5:37 pm
</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Text>
<View style={styles.commentInteractionSection}>
<Icon name="ios-heart" style={{ color: "#b4b4b4" }} />
<Icon
name="reply"
type="MaterialCommunityIcons"
style={{ color: "#b4b4b4" }}
/>
<Icon name="ios-more" style={{ color: "#b4b4b4" }} />
</View>
</View>
</View>
</View>
</View>
</ScrollView>
</View>
</Animated.View>
);
}
}
export default EventScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
},
titlePictureRow: {
flexDirection: "row"
},
titlePictureIntroSection: {
marginLeft: width * 0.05
},
titlePictureIntroSectionTitle: {
fontWeight: "bold",
fontSize: 18
},
eventTitle: {
fontWeight: "bold",
fontSize: 20,
marginVertical: width * 0.1
},
goingSection: {
width: "100%",
height: height * 0.1,
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: "#b4b4b4",
justifyContent: "center"
},
goingSectionContentContainer: {
marginVertical: height * 0.01,
justifyContent: "center"
},
goingSectionContentRow: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
goingSectionApplyContainer: {
flexDirection: "row",
alignItems: "center"
},
eventDetailsSection: {
marginVertical: height * 0.03
},
eventDetailsSectionRow: {
flexDirection: "row",
marginVertical: 10
},
eventDetailsSectionRowWordingSection: {
marginLeft: 20
},
eventDetailsSectionRowWordingSectionTime: {
color: "#b4b4b4",
marginTop: 5
},
memberSection: {},
memberRow: {
flexDirection: "row"
},
eventDescriptionSection: {
marginVertical: height * 0.03
},
photoSection: {
marginVertical: height * 0.05
},
item: {
width: width,
height: width * 0.5
},
imageContainer: {
flex: 1,
backgroundColor: "white",
borderRadius: 3,
marginVertical: 2.5
},
sectionTitle: { fontWeight: "bold", marginBottom: 20 },
commentContainer: {},
commentCardItem: {
flexDirection: "row"
},
commentContentContainer: {
marginLeft: 10
},
commentInteractionSection: {
marginVertical: 5,
width: "30%",
flexDirection: "row",
justifyContent: "space-between"
},
commentInputSection: {
flexDirection: "row",
marginBottom: 30,
alignItems: "center"
}
});
import React，{Component}来自“React”；
进口{
滚动视图，
样式表，
看法
平面列表，
可触摸不透明度，
形象,，
尺寸，
链接，
平台，
键盘避免了gView，
安全区域视图，
有生气的
键盘
}从“反应本族语”；
从“react native read more text”导入ReadMore；
进口转盘{
视差，
标页码
}来自“react native snap carousel”；
从“反应本机模态”导入模态；
进口{
集装箱，
标题，
内容,，
按钮
文本，
缩略图，
徽章，
偶像
输入
}来自“本土基地”；
从“react native maps”导入MapView；
const{width，height}=Dimensions.get（“窗口”）；
类EventScreen扩展组件{
状态={
图像：[
"https://source.unsplash.com/1024x768/?nature",
"https://source.unsplash.com/1024x768/?water",
"https://source.unsplash.com/1024x768/?girl",
"https://source.unsplash.com/1024x768/?tree"
],
动态幻灯片：0，
isKeyboardShow:false
};
建造师（道具）{
超级（道具）；
this.keyboardHeight=新的动画.Value（0）；
}
组件willmount（）{
this.keyboardWillShowSub=Keyboard.addListener(
“键盘将显示”，
这个键盘会显示
);
this.keyboardWillHideSub=Keyboard.addListener(
“键盘将隐藏”，
这个键盘将隐藏
);
}
组件将卸载（）{
此.keyboard将显示sub.remove（）；
此.keyboard将隐藏sub.remove（）；
}
keyboardWillShow=事件=>{
this.setState（{isKeyboardShow:true}）；
动画。计时（此为键盘高度{
持续时间：event.duration，
toValue:event.endCoordinates.height
}).start（（）=>{
console.log（“键盘高度：”，this.keyboardHeight）；
});
};
keyboardWillHide=事件=>{
动画。计时（此为键盘高度{
持续时间：event.duration，
toValue:0
}).start（（）=>{
console.log（“键盘高度：”，this.keyboardHeight）；
this.setState（{isKeyboardShow:false}）；
});
};
_RenderRuncatedFooter=handlePress=>{
返回(
阅读更多
);
};
_renderRevealedFooter=handlePress=>{
返回(
少展示
);
};
_handleTextReady=（）=>{}；
getLat=latLng=>{
返回parseFloat（latLng.split（“，”[0]）；
};
getLng=latLng=>{
返回浮动（latLng.split（“，”[2]）；
};
getMapUrls=（latLng，接近度）=>{
const scheme=Platform.select({
ios：“地图：0,0？q=”，
android：“地理位置：0,0？q=”
});
const_latLng=`${this.getLat（latLng）}，${this.getLng（latLng）}`；
常数标签=接近度；
//索引0包含AppleMpurl 1包含googleMapUrl
返回[`{scheme}${label}@${u latLng}`、`${scheme}${u latLng}（${label}）`]；
};
openMap=（appleMapUrl、googleMapUrl）=>{
如果（Platform.OS==“ios”）{
Linking.canOpenURL（appleMapUrl）.then（受支持=>{
如果（支持）{
返回Linking.openURL（googleMapUrl）；
}否则{
返回Linking.openURL（appleMapUrl）；
}
});
}否则{
Linking.openURL（googleMapUrl）；
}
};
_renderPhotoItem（{item，index}，视差）{
返回(
);
}
获取分页（）{
const{images，activeSlide}=this.state；
返回(
);
}
render（）{
const{categories}=this.props；
让mapUrls=this.getMapUrls（“-37.8181917144.961775”）图书馆");
设appleMapUrl=mapUrls[0]；
让googleMapUrl=mapUrls[2]；
让inputhweight=这个键盘高度；
//const inputInterpolateValue=this.keyboardHeight.interpolate({
//输入范围：[0，1]，
//输出范围：[0，1]
// });
返回(
这似乎是键盘上的自动完成区域。当你输入一个字符时，你看不到该区域中的字母吗？嗨，我想这不是自动完成区域。自动完成区域应该是一个包含I、I、m和的区域。该区域显示在页面上。如果我不将paddingBottom添加到Animated.View中，它就不会有这个whi当键盘打开时，键盘顶部的区域。你找到解决方案了吗？我想我找到了解决方案，但现在无法重述。自去年10月以来，我从未接触过该项目。可能是该解决方案不是一次漫游。这似乎是键盘的自动完成区域。当你输入字符时，你看不到中的字母吗该区域？嗨，我想它不是自动完成区域。自动完成区域应该是其中有I，I和的区域。它显示在页面上。如果我不在动画视图中添加paddingBottom。当键盘打开时，键盘顶部不会有白色区域。你找到解决方案了吗？我想我找到了一个解决方案我现在不能重述。自从去年10月以来，我就没有接触过这个项目。可能那个解决方案不是走走停停。