我将我的视图设置为动画
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()
开始是这样的:
每次键盘打开和关闭,动画发生,将模式的顶部从屏幕上推下时,滚动视图都会缩小一点,直到最后看起来像这样:
