React NativeのonPressに引数を利用する方法

react-native

2022.02.142022.02.15

画面遷移などのときに、変数を次の画面へ渡したい場合が多々あります。<View>などにonPressを使って引数を指定するにはどうしたらよいのでしょうか。

引数なしの場合のonPress
引数ありの場合のonPress
まとめ

引数なしの場合のonPress

これは単純に<View>や<Text>などにonPressと書けば動作しますね。

    const onPressCity = () => {
        console.log('onPress!!');
    }

    const exporttest = cityList.map((city, index) => (
        <View key={index.toString()}>
            <Text onPress={onPressCity}>{city.name}</Text>
        </View>
    ));

引数ありの場合のonPress

やりがちなのですが、<Text onPress={onPressCity()}>みたいに書いてもエラーになります。
正しくは下記のように() => を利用して記載する必要があります。

    const onPressCity = (city) => {
        navigation.navigate('Shop', { city });
    }

    const exporttest = cityList.map((city, index) => (
        <View key={index.toString()}>
            <Text onPress={() => onPressCity(city)}>{city.name}</Text>
        </View>
    ));

上記の{() => onPressShop(city)}という箇所が肝ですね。慣れないうちはややこしいかもしれません。

まとめ

<View>などにonPressを記載して、引数を渡すには、

<Text onPress={() => onPressCity(引数)}>テキストテキスト</Text>

のように記述しましょう。