[在带有React Navigation v5的屏幕之间导航时的输入字段转换

Question

是否有可能使用react navigation v5进行这些输入字段的转换？

Answer 1

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',
    },
})

我认为您使用的是哪个版本的反应导航都没有关系。我认为您可以通过使用react-native-animatable实现目标。您在这里有一个例子。