Как сделать положение группы просмотра в TOP (React Native)?
У меня есть группа просмотра, чтобы обернуть 3 кнопки [Справка, О программе и Выход из системы]. затем я хочу изменить координату Y с анимацией, но результат, как на скриншоте № 1, кнопка «Выход», как сбит, я пробовал с {zIndex: 1}, но не работает. любое решение для?
здесь мой полный код:
import React, { Component } from 'react'
import {
View,
Text,
Image,
TextInput,
TouchableOpacity,
ScrollView,
Dimensions,
Animated,
Easing,
StyleSheet
} from 'react-native'
import Header from '../Components/Header'
import Container from '../Components/Container'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import Button from '../Components/Button'
const SCREEN_WIDTH = Dimensions.get('window').width
class SettingScreen extends Component {
constructor(props) {
super(props)
this.state = {
scrollY: new Animated.Value(0),
animSlide: new Animated.Value(0),
isUpdateProfile: false
}
}
componentDidMount(){
// this.toggleAnimDown()
}
toggleUpdateProfile() {
this.setState({
isUpdateProfile: !this.state.isUpdateProfile
})
if (this.state.isUpdateProfile) {
this.toggleAnimUp()
}else{
this.toggleAnimDown()
}
}
toggleAnimDown() {
Animated.timing(
this.state.animSlide,
{
toValue: 100,
duration: 1700,
easing: Easing.bezier(0.70, 0.3, 0.10, 1),
// useNativeDriver: true
}
).start();
}
toggleAnimUp() {
Animated.timing(
this.state.animSlide,
{
toValue: 0,
duration: 1700,
easing: Easing.bezier(0.70, 0.3, 0.10, 1),
// useNativeDriver: true
}
).start();
}
__renderUpdateProfile() {
if (this.state.isUpdateProfile) {
return (
<>
<View style={[styles.card, styles.marginFromHeader]}>
<View style={styles.cardContent}>
<View style={styles.inputSection}>
<MaterialCommunityIcons name="account" size={25} color="gray" style={styles.inputIcon} />
<TextInput
placeholder="username"
style={styles.textInput}
value={this.state.email}
placeholderTextColor="#A8A8A8"
onChangeText={(value) => {
this.setState({
email: value
})
}}
/>
</View>
<View style={styles.inputSection}>
<MaterialCommunityIcons name="account-card-details" size={25} color="gray" style={styles.inputIcon} />
<TextInput
placeholder="fullname"
style={styles.textInput}
value={this.state.email}
placeholderTextColor="#A8A8A8"
onChangeText={(value) => {
this.setState({
email: value
})
}}
/>
</View>
<View style={styles.inputSection}>
<MaterialCommunityIcons name="email" size={25} color="gray" style={styles.inputIcon} />
<TextInput
placeholder="email"
style={styles.textInput}
value={this.state.email}
placeholderTextColor="#A8A8A8"
onChangeText={(value) => {
this.setState({
email: value
})
}}
/>
</View>
</View>
</View>
<View style={styles.cardContent}>
<Button
text="Save Changes"
type="fill"
onPress={() => this.toggleUpdateProfile()}
textStyle={{
fontSize: 18,
}}
/>
</View>
</>
)
} else {
return (
<>
<TouchableOpacity
activeOpacity={0.5}
onPress={() => this.toggleUpdateProfile()}
style={this.state.isUpdateProfile || styles.marginFromHeader}
>
<View style={[styles.btnBlock, styles.row, styles.center, { marginTop: 16 }]}>
<MaterialCommunityIcons style={{ marginRight: 12 }} name="account" size={25} color="#fff" />
<Text style={styles.textOptionList}>UPDATE PROFILE</Text>
</View>
</TouchableOpacity>
</>
)
}
}
render() {
const { navigation } = this.props
let headMov = this.state.scrollY.interpolate({
inputRange: [0, 160, 161],
outputRange: [160, 80, 80]
})
let headMoveMargin = this.state.scrollY.interpolate({
inputRange: [0, 0, 0],
outputRange: [0, 12, 12]
})
let animateTextMargin = this.state.scrollY.interpolate({
inputRange: [0, 0, 0],
outputRange: [0, 24, 24]
})
let animateAvatar = this.state.scrollY.interpolate({
inputRange: [0, 100, 100],
outputRange: [100, 40, 40]
});
let animateText = this.state.scrollY.interpolate({
inputRange: [0, 140],
outputRange: [1, 0]
})
return (
<>
<Header
title="SETTINGS"
/>
<Container>
<Animated.View
style={{
position: 'absolute',
left: 0,
top: 12,
zIndex: 1,
height: headMov,
width: SCREEN_WIDTH - 6,
justifyContent: "flex-end",
flexDirection: "column"
}}
>
<View style={styles.card}>
<View style={styles.cardContent}>
<View style={styles.row}>
<Animated.Image
style={[
styles.avatar,
{
width: animateAvatar,
height: animateAvatar,
marginTop: headMoveMargin
}
]}
source={{ uri: 'https://lh3.googleusercontent.com/-k-7yD7GwpdQ/WrLMLQeWA7I/AAAAAAAACUI/-xNDeLqhbHEelsa0RAkF7qoxGn4AgvneQCEwYBhgL/w139-h140-p/8ac3d4ad-0a14-476a-9623-0b0ade3d6a86' }}
/>
<View style={{ marginLeft: 26, justifyContent: 'center' }}>
<Animated.Text
style={[
styles.textUsername,
{
marginTop: animateTextMargin
}
]}
>
@fachry.stark
</Animated.Text>
<Animated.Text
style={[
styles.textSocial,
{
opacity: animateText
}
]}
>
2.3K followers
</Animated.Text>
<Animated.Text
style={[
styles.textSocial,
{
opacity: animateText
}
]}
>
2.3K followers
</Animated.Text>
</View>
</View>
</View>
</View>
</Animated.View>
<Animated.ScrollView
scrollEventThrottle={16}
onScroll={Animated.event(
[
{
nativeEvent: { contentOffset: { y: this.state.scrollY } }
}
],
{
useNativeDriver: false
}
)}
>
{this.__renderUpdateProfile()}
<Animated.View style={{
// zIndex: 1,
// height: 400,
transform: [{translateY: this.state.animSlide}]
}}>
<TouchableOpacity activeOpacity={0.5}>
<View style={[styles.btnBlock, styles.row, styles.center]}>
<MaterialCommunityIcons style={{ marginRight: 12 }} name="help-circle" size={25} color="#fff" />
<Text style={styles.textOptionList}>HELP</Text>
</View>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5}>
<View style={[styles.btnBlock, styles.row, styles.center]}>
<MaterialCommunityIcons style={{ marginRight: 12 }} name="alert-circle-outline" size={25} color="#fff" />
<Text style={styles.textOptionList}>ABOUT</Text>
</View>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5}>
<View style={[[styles.btnBlock, styles.row], { backgroundColor: 'red' }]}>
<MaterialCommunityIcons style={{ marginRight: 12 }} name="logout" size={25} color="#fff" />
<Text style={styles.textOptionList}>LOGOUT</Text>
</View>
</TouchableOpacity>
</Animated.View>
</Animated.ScrollView>
</Container>
</>
)
}
}
const styles = StyleSheet.create({
card: {
backgroundColor: '#212121',
marginVertical: 12,
borderRadius: 6,
marginHorizontal: 12,
justifyContent: 'center',
elevation: 20
},
marginFromHeader: {
marginTop: 180,
},
cardHeader: {
padding: 10
},
cardContent: {
padding: 16
},
row: {
flexDirection: 'row'
},
right: {
marginLeft: 'auto'
},
left: {
marginRight: 'auto'
},
center: {
alignItems: 'center'
},
avatar: {
width: 100,
height: 100,
borderRadius: 100,
borderColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 3
},
textUsername: {
color: '#fff',
fontSize: 20,
marginVertical: 8,
alignSelf: 'center',
fontFamily: 'Montserrat-Bold'
},
textSocial: {
fontFamily: 'Montserrat-Medium',
color: '#A8A8A8'
},
inputSection: {
flexDirection: 'row',
paddingHorizontal: 10
},
inputIcon: {
justifyContent: 'center',
alignSelf: 'center',
marginRight: 12
},
textInput: {
color: '#A8A8A8',
fontFamily: 'Montserrat-Medium',
fontSize: 18,
width: '100%',
},
btnBlock: {
padding: 16,
backgroundColor: '#212121'
},
textOptionList: {
color: '#fff',
fontSize: 16,
fontFamily: 'Montserrat-Bold'
}
})
export default SettingScreen