Как рендерить разные страницы React Native?

Question

[Илья]

У меня в AsyncStorage хранится token.
Как мне сделать так что бы если token === null рендерилось одно , а если в нем что то есть рендерилось другое?

Answer 1

[Сергей Пантелеев]

render() {
let token = null;
AsyncStorage.getItem('token')
    .then((value) => {
      if(value !== null) {
        token = value;
      }
 });

	return (
		{token !== null ? (
		    <View>
		    	<Text>Токен есть</Text>
		    </View>
		) : (
		    <View>
		    	<Text>Токена нет</Text>
		    </View>
		)}
	)
}

Comments

[Илья]

Can not use keyword 'await' outside an async function .

[Сергей Пантелеев]

Илья Краморов, ой, поправил ответ

[Илья]

Добрый день. Только что доделал страницу по вашему примеру . Столкнулся с такой проблемой.Страницу крашится и приложение перестает отвечать.

AsyncStorage.getItem("userToken").then(value => {
      if (value !== null) {
        this.setState({
          Token: value
        });
      }
    });

    AsyncStorage.getItem("userImage").then(value => {
      if (value !== null) {
        this.setState({
          image: value
        });
      }
    });

    AsyncStorage.getItem("userName").then(value => {
      if (value !==  null) {
        this.setState({
          username: value
        });
      }
    });

    let userToken = this.state.Token;
    let userImage = this.state.image;
    let userName = this.state.username;

В console.log происходит это:

null null null
null null null
null null null
null null null
null null null
null null null
null null null
null null null

Без остановки пока не выключаю.

[Сергей Пантелеев]

Илья Краморов, а покажите код компонента? в каком месте console.log() вызывается

[Илья]

Когда нажимаю на кнопку если token === null . Я получаю это токен. Страница перезагржается. И в консоле в место null идет мой токен имя и картинка.

[Илья]

render() {
    const { name, image } = this.state;
    const { navigation } = this.props;

    AsyncStorage.getItem("userTokenVK").then(value => {
      if (value !== null) {
        this.setState({
          Token: value
        });
      }
    });

    AsyncStorage.getItem("userImageVK").then(value => {
      if (value !== null) {
        this.setState({
          image: value
        });
      }
    });

    AsyncStorage.getItem("userNameVK").then(value => {
      if (value !== null) {
        this.setState({
          username: value
        });
      }
    });

    let userToken = this.state.Token;
    let userImage = this.state.image;
    let userName = this.state.username;

    console.log(userToken, userName, userImage);

    return (

[Сергей Пантелеев]

Илья Краморов, токен записывается в хранилище?

[Илья]

Вот таким кривым способом. Это происходит по нажатию на кнопку. Данные сохраняются в ключи. После перезапуска приложения кнопка не видна. Но в консоле происходит то о чем писал выше. Вместо Null данные.

let userNameVk = user.response[0].first_name + " " + user.response[0].last_name;
let userImageVK = user.response[0].photo_max;
let userTokenVK = result.params.access_token;
AsyncStorage.setItem("userNameVk", userNameVk);
AsyncStorage.setItem("userImageVK", userImageVK);
AsyncStorage.setItem("userTokenVK", userTokenVK);

[Сергей Пантелеев]

Илья Краморов, а можете на snack полностью компонент загрузить?

https://snack.expo.io/rJUGkedDE – посмотрите, как пример