web-dev-qa-db-ja.com

Reactネイティブ-画面間でのデータの受け渡し

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画面でデータを確認すると、未定義が返されます。私は次の方法を試しました：

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>
    );
}
javascriptreactjsreact-nativestack-navigator
8
Lars Peterson

あなたの問題はパラメータを送信していないことです。あなたはそれを正しく送り、正しく読んでいます。エラーは、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
5
bennygenel

したがって、上記の問題を見ると、screenProps（文書化された here ）のようなものを探していると思います。

これにより、特定の小道具を画面間で渡すことができます。

これがお役に立てば幸いです。他に必要な場合はお知らせください。

0
Apurva jain

次のコードスニペットを使用すると、いくつかの値を含む別の画面に移動できます。

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

そして、あなたはHomeScreenでパラメータを収集することができます、

this.props.navigation.state.params.username
0
Codemaker

親画面から：

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

または

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

子画面から：

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

0
Alexander Vitanov