Изменение поля ввода при переходе между экранами с реагирующей навигацией v5 - PullRequest
Новая
       10

Изменение поля ввода при переходе между экранами с реагирующей навигацией v5

0 голосов
/ 18 апреля 2020

Есть ли возможность сделать эти переходы поля ввода с реагировать навигации v5?

enter image description here

1 Ответ

1 голос
/ 20 апреля 2020

Я думаю, что не имеет значения, какую версию реакции-навигации вы используете. Я думаю, что вы можете достичь своей цели с помощью реакции-native-animatable. У вас есть пример здесь. 

import { Text, View, StyleSheet, SafeAreaView } from 'react-native'
import * as Animatable from 'react-native-animatable'

Animatable.initializeRegistryWithDefinitions({
    nicknameIn: {
        0: {
            opacity: 0,
            height: 0,
            translateX: -600,
            width: 0,
            padding: 0,
            paddingLeft: 0,
            marginTop: 0,
            borderRadius: 0,
            borderWidth: 0,
            borderColor: 'transparent',
            backgroundColor: 'transparent',
        },
        1: {
            opacity: 1,
            height: 30,
            translateX: 0,
            width: 150,
            padding: 5,
            paddingLeft: 15,
            marginTop: 10,
            borderRadius: 10,
            borderWidth: 1,
            borderColor: '#000',
            backgroundColor: '#f1eee2',
        }
    },
    nicknameOut: {
        0: {
            opacity: 1,
            height: 30,
            translateX: 0,
            width: 150,
            padding: 5,
            paddingLeft: 15,
            marginTop: 10,
            borderRadius: 10,
            borderWidth: 1,
            borderColor: '#000',
            backgroundColor: '#f1eee2',
        },
        1: {
            opacity: 0,
            height: 0,
            translateX: -600,
            width: 0,
            padding: 0,
            paddingLeft: 0,
            marginTop: 0,
            borderRadius: 0,
            borderWidth: 0,
            borderColor: 'transparent',
            backgroundColor: 'transparent',
        }
    },
})

export default props => {

    let _nickname = React.useRef(null)

    const [state, setState] = React.useState({
        isLoading: false,
        isRegister: false,
    })

    const openRegister = () => {
        setState({
            isRegister: true,
            isLoading: true,
        })
        _nickname.nicknameIn(250).then(({ finished }) => {
            if(finished)
                setState({
                    isRegister: true,
                    isLoading: false,
                })
        })
    }

    const openLogin = () => {
        setState({
            isRegister: false,
            isLoading: true,
        })
        _nickname.nicknameOut(250).then(({ finished }) => {
            if(finished)
                setState({
                    isRegister: false,
                    isLoading: false,
                })
        })
    }

    return (
        <SafeAreaView style={styles.main}>
            <Text style={styles.title}>Sign in</Text>
            <View style={styles.view}>
                <Animatable.Text ref={ref => _nickname = ref} style={styles.nickname}>
                    User Nickname
                </Animatable.Text>
                <Text style={styles.text}>
                    User Email
                </Text>
                <Text style={styles.text}>
                    Password
                </Text>
            </View>
            { state.isRegister
                ? <Text onPress={openLogin} style={styles.login}>Log in here</Text>
                : <Text onPress={openRegister} style={styles.login}>Create one here</Text>
            }

            { !state.isLoading
                ? <Text style={styles.via}>Or sign up via...</Text>
                : null
            }
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    main: {
        flex: 1,
        alignItems: 'center',
    },
    view: {

    },
    title: {
        fontSize: 17,
        fontWeight: 'bold',
    },
    text: {
        width: 150,
        height: 30,
        padding: 5,
        paddingLeft: 15,
        marginTop: 10,
        borderRadius: 10,
        borderWidth: 1,
        borderColor: '#000',
        backgroundColor: '#f1eee2',
    },
    nickname: {
        opacity: 0,
        height: 0,
    },
    login: {
        marginTop: 10,
        color: '#089',
    },
    via: {
        marginTop: 20,
        fontSize: 25,
        fontWeight: 'bold',
    },
})
...