2

我想在单击菜单项时更新本机导航的初始参数

    import React, { useState } from 'react';
import {createStackNavigator} from '@react-navigation/stack'
import { NavigationContainer } from '@react-navigation/native';
import userMain from './../../components/users/userMain';
import { View, Icon } from 'native-base';

export const UserStack = () => {
    const Stack = new createStackNavigator()
    const [toggleSearch, setToggleSearch] = useState(true)
    const changeStyleToggle = () => {
        setToggleSearch( !toggleSearch )
        // console.log('toggle search here ==== ', toggleSearch)
    }
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="User Homepage"
                    component={userMain}
                    initialParams={{ toggleSearch: toggleSearch}}   
                    options = {{
                        title: 'My home',
                        headerStyle: {
                            backgroundColor: '#f4511e',
                        },
                        headerTintColor: '#fff',
                        headerTitleStyle: {
                            fontWeight: 'bold',
                        },
                        headerRight: () => (
                            <View style={{flexDirection:'row', justifyContent:'space-evenly', width:120}}>
                                <Icon name='home' onPress={() => changeStyleToggle()} />
                                <Icon name='home' />
                                <Icon name='home' />
                            </View>
                        ),
                    }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

我正在调用的组件是 userMain，我在其中调用 initialParams 值并代表我想更改样式

    import React from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import { Input } from 'native-base';

const userMain = (props) => {

    const {toggleSearch} = props.route.params;
    console.log(toggleSearch)
    const check = toggleSearch == true ? 'true!!' : 'false!!'
    return (
        <View style={styles.container}>
            <Input 
                placeholder="search"
                style={styles.searchInput}
            />
            <Text>user homepage here</Text>
            <Text>{check}</Text>
            <TouchableOpacity style={styles.btn}>
                <Text style={styles.btnText}> + </Text> 
            </TouchableOpacity>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        alignItems: 'center', flex: 1, justifyContent: 'center',
    },
    btn: {
        position: 'absolute', justifyContent: 'center', alignItems: 'center',
        bottom:10, right:10, width:60, height: 60,
        backgroundColor: '#fff', borderRadius: 50, borderColor: '#000',borderWidth:1,
    },
    btnText: {
        fontSize: 50, color: 'black',
    },
    searchInput: {
        position:'absolute', top: 0, borderWidth: 1, width: 300, opacity:0
    }

})

export default userMain

我已经检查了单击图标状态，它是 toggleSearch 正在更新，但它没有更新 initialParams，因此它也不适用于 userMain 组件。

4

0 回答 0