1

オブジェクトで自分の状態の特定のパラメーターを送信または設定する必要があるアプリに取り組んでいます。

尊重された状態の私のオブジェクトは次のとおりです。

   const [isGlutenFree, setIsGlutenFree] = useState(false);
    const [isLactoseFree, setisLactoseFree] = useState(false);
    const [isVegan, setIsVegan] = useState(false);
    const [isVegetarian, setIsVegetarian] = useState(false);
    
    const saveFilters = () => {
       const appliedFilters = {
          glutenFree: isGlutenFree,
          lactosFree: isLactoseFree,
          vegan: isVegan,
          isVegetarian: isVegetarian
       };
    };

これらはすべて私のFiltersScreen.jsファイルにあります。だから私はCommonActionsuseEffectを使ってパラメータを設定しようとしました:

import { CommonActions } from '@react-navigation/native';

useEffect(() => {
    props.navigation.dispatch(CommonActions.setParams({ save: saveFilters }));
});

次に、Navigator.jsファイル内でこれを受信しようとしました。これを画面に console.log して、必要なデータがあることを確認しました。

<FilterNav.Screen
                name="Filters"
                component={FiltersScreen}
                options={({ route }) => ({
                    title: 'Filters',
                    headerLeft: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Menu'
                                iconName='ios-menu'
                                onPress={() => {
                                    navigation.toggleDrawer();
                                }}
                            />
                        </HeaderButtons>
                    ),
                    headerRight: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Save'
                                iconName='ios-save'
                                onPress={() => {
                                    // CONSOLE LOG THE PARAMS SET >>
                                    console.log(route.params.save);
                                }}
                            />
                        </HeaderButtons>
                    )
                })}

            />
        </FilterNav.Navigator>

この部分を具体的に説明すると、次のようになります。

 headerRight: () => (
                            <HeaderButtons HeaderButtonComponent={HeaderButton}>
                                <Item
                                    title='Save'
                                    iconName='ios-save'
                                    onPress={() => {
                                        // CONSOLE LOG THE PARAMS SET >>
                                        console.log(route.params.save);
                                    }}
                                />
                            </HeaderButtons>
                        )

しかし、これは機能せず、何も返されません。また、すべてのスイッチがフリーズします。

の完全なコードは次のFiltersScreen.jsとおりです。

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Switch, Platform } from 'react-native';

import { CommonActions } from '@react-navigation/native';

import Colors from '../constants/colors';

const FiltersSwitch = props => {
    return(
    <View style={styles.filterContainer}>
        <Text>{ props.label }</Text>
        <Switch
            trackColor={{ true: Colors.primaryColor }}
            thumbColor={Platform.OS === 'android' ? Colors.primaryColor : ''}
            value={props.state}
            onValueChange={props.onChange} />
    </View>
    );
};

const FiltersScreen = props => {

    const [isGlutenFree, setIsGlutenFree] = useState(false);
    const [isLactoseFree, setisLactoseFree] = useState(false);
    const [isVegan, setIsVegan] = useState(false);
    const [isVegetarian, setIsVegetarian] = useState(false);
    
    // We will give this a connection with the 
    // MealsNavigator in order to trigger this 
    // function via useEffect 
    const saveFilters = () => {
       const appliedFilters = {
          glutenFree: isGlutenFree,
          lactosFree: isLactoseFree,
          vegan: isVegan,
          isVegetarian: isVegetarian
       };
    };

    useEffect(() => {
        props.navigation.dispatch(CommonActions.setParams({ save: saveFilters }));
    });

    return (
        <View style={styles.screen}>
            <Text style={styles.title}>Available Filters / Restrictions</Text>
            <FiltersSwitch
                label="Glutten Free"
                state={isGlutenFree}
                onChange={newValue => setIsGlutenFree(newValue)} />

            <FiltersSwitch
                label="Lactose Free"
                state={isLactoseFree}
                onChange={newValue => setisLactoseFree(newValue)} />

            <FiltersSwitch
                label="Vegan"
                state={isVegan}
                onChange={newValue => setIsVegan(newValue)} />

            <FiltersSwitch
                label="Vegetarian"
                state={isVegetarian}
                onChange={newValue => setIsVegetarian(newValue)} />
        </View>
    );
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        alignItems: 'center'
    },
    title: {
        fontFamily: 'poppins-bold',
        fontSize: 22,
        margin: 20,
        textAlign: 'center'
    },
    filterContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '80%',
        marginVertical: 15
    }
});

export default FiltersScreen;

navigation.jsファイルの完全なコードは次のとおりです。

const FilterNav = createStackNavigator();

const FiltersNavigator = () => {
    return (
        <FilterNav.Navigator
            mode="modal"
            screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.primaryColor,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontSize: 17
                }
            }}
        >
            <FilterNav.Screen
                name="Filters"
                component={FiltersScreen}
                options={({ route }) => ({
                    title: 'Filters',
                    headerLeft: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Menu'
                                iconName='ios-menu'
                                onPress={() => {
                                    navigation.toggleDrawer();
                                }}
                            />
                        </HeaderButtons>
                    ),
                    headerRight: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Save'
                                iconName='ios-save'
                                onPress={() => {
                                    console.log(route.params.save);
                                }}
                            />
                        </HeaderButtons>
                    )
                })}

            />
        </FilterNav.Navigator>
    );
};

これを解決する方法を教えてください。React Navigation 5 を使用しています。

4

1 に答える 1

0

useEffect「フリーズ」の問題は、依存配列がないため、すべての画面レンダリングで実行されていることだと思います（ヒント：効果をスキップしてパフォーマンスを最適化するを読んでください）。

コードは次のようになります。

// useCallback, so it doesn't create a new saveFilters function in every render
const saveFilters = useCallback(() => {
  const appliedFilters = {
    glutenFree: isGlutenFree,
    lactosFree: isLactoseFree,
    vegan: isVegan,
    isVegetarian: isVegetarian
  };
}, [isGlutenFree, isLactoseFree, isVegan, isVegetarian]); // This function depends on those variables.

useEffect(() => {
  props.navigation.dispatch(CommonActions.setParams({ save: saveFilters }));
}, [saveFilters]); // It should change the parameterized function if it changes
于 2020-08-01T12:09:26.803 に答える