React Native навигационные реквизиты не будут работать в отдельном файле

Question

Я пытаюсь создать Экран входа в систему с функцией аутентификации и навигацией в отдельном файле, но всегда получаю ошибку при навигации. Я пытался передать реквизит, но он не работает ...

Не могли бы вы мне помочь?

Это мой код:

Приложение. js

export default class App extends React.Component{
render(){
    return(
        <RootStack navigation={this.props.navigation} />
    )
}

}

корневой каталог. js

const StackNavigator = createStackNavigator({
 Login: {
    screen: login,
    navigationOptions: {
        headerShown: false,
    }
},
Home: {
    screen: TaskScreen,
    navigationOptions: {
        headerShown: false,
    }
    }
})

export default createAppContainer(StackNavigator);

Вход. js

...
<Auth props={this.props}/>
...

аутентификация js

export function Auth() {

    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    const auth = (props) => {
            fetch('http://192.168.178.26:8000/auth/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ username, password })

            })
                .then(res => res.json())
                .then(res => {
                    saveToken(res.token);
                    console.log(res.token);
                    props.navigation.navigate('Home'); # Here i get the error

                })
                .catch(error => console.log(error));
    };
    const saveToken = async (token) => {
        await AsyncStorage.setItem('IN_Token', token)
    };
...

Не могли бы вы мне помочь?

Ой, извините, я забыл добавить сообщение об ошибке: undefined не является объектом (оценка 'props.navigation.navigate')

Answer 1

Поскольку вы используете компонент функции, вы должны передать props в качестве параметров компоненту функции для доступа к ним

Итак, в вашем auth.js просто отправьте props в параметрах функции

функция экспорта Auth (реквизиты) {

const [username, setUsername] = useState("");
const [password, setPassword] = useState("");

const auth = (props) => {
        fetch('http://192.168.178.26:8000/auth/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ username, password })

        })
            .then(res => res.json())
            .then(res => {
                saveToken(res.token);
                console.log(res.token);
                props.props.navigation.navigate('Home'); # Here i get the error

            })
            .catch(error => console.log(error));
};
const saveToken = async (token) => {
    await AsyncStorage.setItem('IN_Token', token)
};

или

const auth = ({props}) => {
...

            .then(res => res.json())
            .then(res => {
                saveToken(res.token);
                console.log(res.token);
                props.navigation.navigate('Home'); # Here i get the error

            })

Это должно работать!

Answer 2

вы не получаете реквизиты в верхней части компонента Auth, вам нужно получить реквизиты в объявлении, а не в указанной выше функции.

вы должны объявить Auth следующим образом export function Auth(props)

Еще одна вещь: вы передаете Auth props={this.props}, поэтому ваш реквизитный объект внутри Auth, вероятно, выглядит примерно так: props.props.navigation. Вы можете использовать оператор распространения, чтобы избежать этого <Auth {...this.props}/>

Это должно сработать.

Еще один подход, который вы можете сделать, и мне нравится больше, - функция Auth возвращает обратный вызов Login.js и внутри Login . js Вы делаете навигацию.