Question

当我有120的键盘打开时，我会以Modal像素为视角设置动画。键盘关闭时，视图向下返回120像素。问题是，屏幕上方的区域消失了，当它变回动画时，视图会变小，并且每次都会变小，这是代码-我将添加注释以显示视图缩小：

<Animated.View
        style={{
          paddingTop: 5,
          paddingBottom: 10,
          paddingLeft: 10,
          paddingRight: 10,
          marginTop: this.state.yPosition,
          marginBottom: this.state.yPositionPositive,
          flex: 1,
          marginLeft: (Dimensions.get('window').width - 300) / 4,
          backgroundColor: 'rgba(0,0,0,0.8)',
          width: 300,
          borderRadius: 4,
          borderWidth: 0,
        }}>
        <View style={{ flexDirection: 'column', justifyContent: 'space-between', flex: 1 }}>
          <View style={{height: 126, backgroundColor: 'blue', alignItems: 'stretch'}}>
            <ScrollView contentContainerStyle={{flexGrow:1}} style={{flexDirection: 'column', backgroundColor: '#e6fffe'}}>
              <View style={{height: 90, backgroundColor: 'red', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingTop: 5, paddingBottom: 5, borderBottomColor: '#6de3dc', borderBottomWidth: 0}}>
                <View style={{justifyContent: 'center', alignItems: 'center', flex: 0.5}}>
                  <View style={{flexDirection: 'column', justifyContent: 'space-between'}}>
                    <Image
                      source={require('../assets/billythekid2.jpg')}
                      style={{height: 60, width: 60, marginTop: Platform.OS === 'ios' ? 10 : 10, borderColor: '#6de3dc', borderWidth: 2, borderRadius: 30}}
                    />
                    <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 5}}>
                      <Ionicons
                        name='ios-star'
                        color='#eec400'
                        size={14}
                      />
                      <Ionicons
                        name='ios-star'
                        color='#eec400'
                        size={14}
                      />
                      <Ionicons
                        name='ios-star'
                        color='#eec400'
                        size={14}
                      />
                      <Ionicons
                        name='ios-star'
                        color='#eec400'
                        size={14}
                      />
                      <Ionicons
                        name='ios-star'
                        color='#eec400'
                        size={14}
                      />
                    </View>
                  </View>
                </View>
                <View style={{flexDirection: 'column', backgroundColor: '#e6fffe', marginTop: Platform.OS === 'ios' ? 10 : 10, flex: 0.5}}>
                  <View style={{flexDirection: 'row', flex: 0.5}}>
                    <View style={{flex: 0, alignSelf: 'center'}}>
                      <Text style={{fontSize: 16, fontWeight: '700'}}>
                        eamon.white
                      </Text>
                    </View>
                  </View>
                </View>
              </View>
              <View style={{flex: 0, marginBottom: 5, backgroundColor: '#e6fffe'}}>
                <Text
                  style={{
                    width: 280,
                    flex: 0,
                    backgroundColor: '#e6fffe',
                    paddingLeft: 5,
                    borderWidth: 0,
                    borderRadius: 4,
                    color: '#000',
                    fontSize: 14,
                  }}>
                    {this.state.messageFromSender}
                </Text>
              </View>
            </ScrollView>
          </View>
          <View style={{flex: 1}} onLayout={(event) => {
            this.setState({height: event.nativeEvent.layout.height});
          }}>
            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
              <View style={{ flexDirection: 'column', flex: 1 }}>
                <Text
                  style={{
                    flex: 0,
                    width: Dimensions.get('window').width,
                    color: 'white',
                    fontWeight: '700',
                    marginTop: 5,
                    marginBottom: 5
                  }}>
                  Date(s) Needed:
                </Text>
                {this.showCalendar()}
              </View>
            </TouchableWithoutFeedback>
            <View style={{ flex: 0, marginBottom: 10, justifyContent: 'center', flexDirection: 'column', marginTop: 0 }}>
              <TextInput
                style={{
                  width: 280,
                  borderColor: 'gray',
                  borderWidth: 1,
                  backgroundColor: '#ffffff',
                  paddingLeft: 5,
                  borderRadius: 4,
                  height: this.state.height - 313
                }}
                onChangeText={text => this.setState({ message: text })}
                value={this.state.message}
                multiline={true}
                numberOfLines={2}
                onFocus={this.animateUp}
                placeholder='Type a message...'
              />
            </View>
          </View>
          <View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0, marginBottom: 10 }}>
            <TouchableOpacity
              activeOpacity={1}
              style={{
                backgroundColor: this.state.rentButtonBackground,
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                width: 280,
                borderRadius: 4,
                borderWidth: 0,
              }}
              onPress={() => {

              }}>
              <Text
                style={{
                  backgroundColor: this.state.rentButtonBackground,
                  textAlign: 'center',
                  color: 'white',
                  fontWeight: '900',
                  fontSize: 18,
                  borderRadius: 4,
                  borderWidth: 0,
                }}>
                RESPOND
              </Text>
            </TouchableOpacity>
          </View>
          <View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0, marginBottom: 10 }}>
            <TouchableOpacity
              activeOpacity={1}
              style={{
                backgroundColor: this.state.rentButtonBackground,
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                width: 280,
                borderRadius: 4,
                borderWidth: 0,
              }}
              onPress={() => {

              }}>
              <Text
                style={{
                  backgroundColor: this.state.rentButtonBackground,
                  textAlign: 'center',
                  color: 'white',
                  fontWeight: '900',
                  fontSize: 18,
                  borderRadius: 4,
                  borderWidth: 0,
                }}>
                ACCEPT
              </Text>
            </TouchableOpacity>
          </View>
          <View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0 }}>
            <TouchableOpacity
              activeOpacity={1}
              style={{
                backgroundColor: this.state.rentButtonBackground,
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                width: 280,
                borderRadius: 4,
                borderWidth: 0,
              }}
              onPress={() => {

              }}>
              <Text
                style={{
                  backgroundColor: this.state.rentButtonBackground,
                  textAlign: 'center',
                  color: 'white',
                  fontWeight: '900',
                  fontSize: 18,
                  borderRadius: 4,
                  borderWidth: 0,
                }}>
                DECLINE
              </Text>
            </TouchableOpacity>
          </View>
        </View>
</Animated.View>

动画：

animateUp = () => {

    Animated.parallel([
      Animated.timing(this.state.yPosition, {
          toValue: -120,
          duration: 300,
      }),

      Animated.timing(this.state.yPositionPositive, {
          toValue: 120,
          duration: 300,
      })
    ]).start();
}

Animated.parallel([

    Animated.timing(this.state.yPosition, {
          toValue: 0,
          duration: 1,
    }),

    Animated.timing(this.state.yPositionPositive, {
          toValue: 0,
          duration: 1,
        })
]).start()

它开始像这样：

每次打开和关闭键盘，并发生动画，将模态的顶部推离屏幕时，ScrollView都会缩小一点-直到最终看起来像这样：

任何建议都会很棒。

Answer 1

如果需要在键盘打开时为视图设置动画，请使用KeyboardAvoidingView：

https://facebook.github.io/react-native/docs/keyboardavoidingview

React Native-带有动画的键盘打开/关闭后ScrollView高度变化

1 个答案: