React Native - передача данных между экранами

У меня проблемы с react-native приложением. Я не могу понять, как передавать данные между экранами.

Я понимаю, что есть и другие подобные вопросы, на которые даны ответы на SO, однако решения для меня не сработали.

Я использую StackNavigator. Вот мои настройки в моем App.js файле.

export default SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Categories: { screen: CategoriesScreen }, // send from here
    Category: { screen: CategoryScreen }      // to here
});

У меня есть TouchableHighlight компонент, у которого есть onPress событие, которое переместит на нужный экран. Это на моем Categories.js файле / экране.

<TouchableHighlight onPress={(id) => {
    const { navigate } = this.props.navigation;
    navigate('Category', { category: id });
}}>
    <Text>{name}</Text>
</TouchableHighlight>

Когда я щелкаю элемент, экран действительно переключается на category, однако данные props не отправляются.

Поэтому, когда я проверяю данные на моем Category экране, он возвращает значение undefined. Я пробовал следующие методы:

this.props.category
this.props.navigation.state.category;
this.props.navigation.state.params.category

Как именно я могу получить доступ к данным, которые я передал в методе navigate?

navigate('Category', { category: id });

Изменить: вот моя фактическая структура кода:

data происходит от API.

for (var i = 0; i < data.length; i++) {
    var name = data[i].name;
    var id = data[i].id;
    categoryComponents.push(
        <Card key={id}>
            <CardItem>
                <Body>
                    <TouchableHighlight onPress={(id) => {
                        const { navigate } = this.props.navigation;
                        navigate('Category', { params: { category: id } });
                    }}>
                        <Text>{name + " " + id}</Text>
                    </TouchableHighlight>
                </Body>
            </CardItem>
        </Card>
    );
}

react-native reactjs javascript stack-navigator
person Lars Peterson    schedule 02.10.2017    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Ваша проблема не в отправке параметра. Вы отправляете это правильно и правильно читаете. Ваша ошибка связана с тем, что ваш id не определен.

Вы должны исправить свой код, как показано ниже,

for (var i = 0; i < data.length; i++) {
    var name = data[i].name;
    var id = data[i].id;
    categoryComponents.push(
        <Card key={id}>
            <CardItem>
                <Body>
                    <TouchableHighlight onPress={(event) => {
                        // onPress event fires with an event object
                        const { navigate } = this.props.navigation;
                        navigate('Category', { category: id });
                    }}>
                        <Text>{name + " " + id}</Text>
                    </TouchableHighlight>
                </Body>
            </CardItem>
        </Card>
    );
}

И вы можете прочитать свой параметр, как показано ниже.

this.props.navigation.state.params.category
person bennygenel    schedule 02.10.2017
comment
Большое спасибо! Я застрял на этом огне какое-то время. Я переопределил переменную id, потому что сделал ее параметром? - person Lars Peterson; 02.10.2017
comment
Да, вы переопределяли параметры, поэтому идентификатор, который вы пытались передать, на самом деле не был идентификатором, который вы создали в своем цикле for. - person bennygenel; 02.10.2017

arrow_upward
0
arrow_downward

С родительского экрана:

navigate({ routeName: 'Category',  params: { category: id } })

or

navigate('Category', { category: id })

С детского экрана:

const category = this.props.navigation.state.params.category

person Alexander Vitanov    schedule 02.10.2017
comment
Я только что попробовал это, но кажется, что он все еще возвращает undefined. - person Lars Peterson; 02.10.2017
comment
Откуда берется ваш идентификатор в ‹TouchableHighlight onPress = {(id) =› {...? - person Alexander Vitanov; 02.10.2017
comment
Боюсь, это неправильно. Передача параметров неверна. - person bennygenel; 02.10.2017
comment
Вам не хватало скобок. Я отредактировал ответ. - person bennygenel; 02.10.2017
comment
Обновленный ответ кажется хуже. Страница не выполняет навигацию и не отправляет данные. Ничего не произошло. - person Lars Peterson; 02.10.2017
comment
Вы используете Redux? - person Alexander Vitanov; 02.10.2017

arrow_upward
0
arrow_downward

Итак, глядя на описанную выше проблему, я думаю, вы ищете что-то вроде screenProps (задокументировано здесь).

Это позволяет передавать определенный реквизит по экранам.

Надеюсь, это поможет. Пожалуйста, дайте мне знать, если вам что-нибудь понадобится.

person Apurva jain    schedule 02.10.2017

arrow_upward
0
arrow_downward

Используя следующий фрагмент кода, вы можете перейти на другой экран с некоторыми значениями.

navigate({ Home: 'HomeScreen',  params: { username: 'abcd' } })

и вы можете собрать параметр на HomeScreen, используя,

this.props.navigation.state.params.username
person Codemaker    schedule 26.03.2019