Что такое {... props} и как получить мою функцию от других - PullRequest
Новая
       10

Что такое {... props} и как получить мою функцию от других

2 голосов
/ 05 мая 2020

Пытаюсь научиться реагировать нативно и особенно реагировать на навигацию v5.

По этой топи c: https://reactnavigation.org/docs/themes/#using -the-current-theme-in-your-own-components , я пытаюсь сделать темный режим но у меня нет понять, как вызвать мою функцию toggleTheme() в TouchableRipple.

My App. js: 

const [isDarkTheme, setIsDarkTheme] = React.useState(false);

const theme = isDarkTheme ? CombinedDarkTheme : CombinedDefaultTheme;

function toggleTheme() {
    setIsDarkTheme(isDark => !isDark);
}

return (
    <PaperProvider theme={theme}>
        <NavigationContainer theme={theme}>
            <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
                    //{...other things...}
            </Drawer.Navigator>
        </NavigationContainer>
    </PaperProvider>
);

My DrawerContent. js: 

export function DrawerContent(props) {
    const paperTheme = useTheme();

    //{...other things...}

    <DrawerContentScrollView {...props}>
        //{...other things...}
        <Drawer.Section title="Préférences">
                <TouchableRipple onPress={props.toggleTheme}>
                    <View style={styles.preferences}>
                        <Text>Dark Theme</Text>
                        <View pointerEvents="none">
                            <Switch value={paperTheme.dark} />
                        </View>
                    </View>
                </TouchableRipple>
    //{...other things...}

В соответствии с topi c, если я позвоню onPress={props.toggleTheme}, появится darktheme, но это не работает. Итак, как вызвать эту функцию из приложения. js в DrawerContent. js

Переключатель перемещается, если я установил <Switch value={!paperTheme.dark}, поэтому, похоже, useTheme(); работает.

И последний вопрос, что такое {...props}, я не могу зарегистрировать его, потому что он возвращается из памяти.

Спасибо людям, которые помогли мне это понять!

1 Ответ

2 голосов
/ 05 мая 2020

Добавьте его в: <DrawerContent {...props} />

например, <DrawerContent {...props} toggleTheme={toggleTheme} />

, затем он появится как ссылка на функцию в свойствах DrawerContent как props.toggleTheme

const [isDarkTheme, setIsDarkTheme] = React.useState(false);

const theme = isDarkTheme ? CombinedDarkTheme : CombinedDefaultTheme;

function toggleTheme() {
    setIsDarkTheme(isDark => !isDark);
}

return (
    <PaperProvider theme={theme}>
        <NavigationContainer theme={theme}>
            <Drawer.Navigator drawerContent={props => <DrawerContent {...props} toggleTheme={toggleTheme} />}>
                    //{...other things...}
            </Drawer.Navigator>
        </NavigationContainer>
    </PaperProvider>
);
...