KeyboardAvoiding查看键盘顶部的额外填充空白区域

Question

有人知道为什么打开键盘时键盘顶部会有空白吗？无论我将paddingBottom设置为哪个值。打开键盘时，键盘顶部始终会出现白色区域。设置为paddingBottom的值越小，键盘上的空白空间就越小。但是，无论将哪个值设置为paddingBottom。空白永远不会消失。

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