Question

import { createStackNavigator, createDrawerNavigator } from 'react-navigation'
import { Button, Text } from 'react-native'
import React, { Component } from 'react'

// Components

class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {value: 1}
  }

  render() {
    return (<Text>{this.state.value}</Text>)
  }
}

class Settings extends Component {
  _press = function () {
    // Update Home's state here
  }

  render() {
    return (<Button title='Update Home' onPress={this._press.bind(this)}></Button>)
  }
}

// Navigation

const homeNavigator = createStackNavigator({
  HomeScreen: {screen: Home}
})

const settingsNavigator = createStackNavigator({
  SettingsScreen: {screen: Settings}
})

const drawerScreens = createDrawerNavigator({
  Home: homeNavigator,
  Settings: settingsNavigator
})

export default createStackNavigator({
  drawer: { screen: drawerScreens, navigationOptions: { header: null } }
})

我试图在同一屏幕上通过设置上的按钮更新我的房屋状态（不使用this.props.navigation.navigate），但是搜索了几个小时之后，我无法弄清楚怎么做。

没有Redux之类的东西甚至可能实现吗？我最初决定使用Redux来解决此问题，但是当我发现他们在本赛季放弃官方支持时，我决定反对。

Answer 1

可以通过如下方式使用NavigationActions.setParams：

import { NavigationActions } from 'react-navigation';

const setParamsAction = NavigationActions.setParams({
  params: { value: 2 },
  key: 'screen-123',
});
this.props.navigation.dispatch(setParamsAction);

请注意，您需要使用主屏幕键。然后，在主屏幕中，您需要聆听不断变化的navigation道具并对此变化采取行动。这可以通过添加componentWillRecieveProps React生命周期事件或使用getDerivedStateFromProps静态方法来实现。您的参数将位于this.props.navigation.state.params下。

看看here

Answer 2

就我而言：

我在主屏幕模块中创建了一个状态变量（称为 testValue）。在导航期间将此变量传递到屏幕 2。在屏幕 2 中修改它，然后在导航返回时将其传回主屏幕。

主屏幕：这里我们创建了一个打印在主屏幕上的变量 testValue。我们还有一个导航到屏幕 2 的按钮。我们还将 testValue 变量传递到屏幕 2。

function HomeScreen({ navigation }) {
  const [testValue, setTextFeed] = useState(0); 

  return (
    <View >
      <Text>{testValue}</Text>
      <Button
          onPress={() => {
            navigation.navigate("Screen 2", {
              value: testValue,
            });
          }}
      >
    </View>
  );
}

屏幕 2：这里我们检索从主屏幕传递的 testValue 变量（它存储在路由参数中）。每次用户按下 button1 时，testValue 都会增加 5 个单位。第二个按钮将导航回主屏幕。因为我们已经将 testValue 传回主屏幕，所以打印在主屏幕上的值将被更新。注意：主屏幕不需要路由参数。

function Screen2({ route, navigation }) {
  const { testValue} = route.params;
  const addFunc = () => {
    testValue += 5
  };

  return (
    <View >
      <Text>{testValue}</Text>

      //button1 this button increments testValue
      <Button
          onPress={() => addFunc()}
      >

      //button2 this button navigates to home screen
      <Button
          onPress={() => {
            navigation.navigate("HomeScreen", {
              value: testValue,
            });
          }}
      >
    </View>
  );
}

在React导航中更新另一个屏幕的状态

2 个答案: