如何在本机反应中从另一个更新组件

Question

我正在使用 React Native App，我有一个显示类别的主页，以及一个导航到另一个页面以添加新类别的按钮， 问题是，当我添加一个新页面时，我还想更新主页以包含新页面， 有没有办法这样做，这是我的代码，

这个导航

const HomeStack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();

const MainTabScreen = () => (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#fff"
    >
      <Tab.Screen
        name="Home"
        component={HomeStackScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarColor: '#009387',
          tabBarIcon: ({ color }) => (
            <Icon name="ios-home" color={color} size={26} />
          ),
        }}
      />
);

export default MainTabScreen;

const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator screenOptions={{
        headerStyle: {
        backgroundColor: '#009387',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
        fontWeight: 'bold'
        }
    }}>
        <HomeStack.Screen name="Home" component={HomeScreen} options={{
        title:'Overview',
        headerLeft: () => (
            <Icon.Button name="ios-menu" size={25} backgroundColor="#009387" onPress={() => navigation.openDrawer()}></Icon.Button>
        )
        }} />
        <HomeStack.Screen name="Home_Provider" component={HomeScreen_Provider} options={{
        title:'Overview',
        headerLeft: () => (
            <Icon.Button name="ios-menu" size={25} backgroundColor="#009387" onPress={() => navigation.openDrawer()}></Icon.Button>
        )
        }} />
        <HomeStack.Screen name="AddServiceScreen" component={AddServiceScreen} options={{
        title:'Overview',
        headerLeft: () => (
            <Icon.Button name="ios-menu" size={25} backgroundColor="#009387" onPress={() => navigation.openDrawer()}></Icon.Button>
        )
        }} />
</HomeStack.Navigator>
);

这是主页：

const HomeScreen_Provider = ({navigation}) => {

  const [services, setServices] = React.useState([]);
  const [status, setStatus] = React.useState([]);

  async function fetchdata(){
    api.GetMyServices({headers:{'Accept': "application/json", 'content-type': "application/json"}})
      .then(function (response) {
        console.log(response.data);
        setServices(response.data);
        
    })
    .catch(function (error) {
      console.error(error);
    });
  }

  React.useEffect(() => {
    fetchdata();
    
  }, []);

  return (
    <View style={styles.container}>
      <StatusBar backgroundColor='#009387' barStyle="light-content"/>
      <View style={{marginTop:20}}>
        <Text style={styles.text_header}>My Services</Text>
      </View>
      <TouchableOpacity
        style={{alignItems:'flex-end',marginLeft:250}}
        onPress={() => navigation.navigate('AddServiceScreen')}
      >
        <Text style={styles.button}>Add New..</Text>
      </TouchableOpacity>
      {services.length == 0 ? <Text >You Have No Services Yet, Click Here To Add..</Text> : <View/>}
       <ScrollView>
           {services.map (service => (
            <View style ={styles.rowContainer}> 
              <Text style={styles.text_footer}>{service.name}     </Text>
              <Text style={styles.text_footer}>{service.status}    </Text> 

              <TouchableOpacity
                
                onPress={handleToggle}
              >
                <Text style={styles.button}>Change Status</Text>
              </TouchableOpacity>
            </View>
           ))}
        </ScrollView>       
    </View>
    )
};
export default HomeScreen_Provider;


````````````

here is the add new page :

const AddServiceScreen = ({navigation}) => {

    const { colors } = useTheme();
    const [availableServices, setAvailableServices] = React.useState([]);
    const [userID, setUserID] = React.useState(0);
  const [serviceId, setServiceId] = React.useState(0);
    const [serviceName, setServiceName] = React.useState(0);
    const [serviceStatus, setServiceStatus] = React.useState('');
  const [serviceCost, setServiceCost] = React.useState(0);

     async function handleAddServiceButton () {
 
        api.AddNewCategory(Category,{headers:{'Accept': "application/json", 'content-type': "application/json"}})
        .then(function (response) {
  
        })
        .catch(function (error) {
          console.error(error);
        });
    }

    return (
        <View style={styles.container}>
          <StatusBar barStyle= { theme.dark ? "light-content" : "dark-content" }/>
            <View style={styles.rowContainer} >
              {availableServices.length !== 0 ? (
              <View>
              <Text style={{marginTop:15,marginBottom:30}}>Select From Existing Services</Text>
              <Picker
                selectedValue={serviceId}
                style={{ height: 50, width: 150 }}
                onValueChange={(itemValue, itemIndex) => setServiceId(itemValue)}
              >
              {availableServices.map((service)=>{
                return(
                  <Picker.Item label={service.name} value={service.id} />
                )
              })}
              </Picker>
              </View>
              ): <View/>}
            </View>
           <Button
                title="Submit"
                onPress={handleAddServiceButton}
              />
           
        </View>

    );
};
export default  AddServiceScreen;

Answer 1

您可以使用react context 直接更新状态并在 API 调用中使用扩展运算符

或

您可以使用redux 来维护您的状态以集中您的应用程序状态