react-native - 无需 redux 的 React 导航状态管理

Question

我正在使用 React Navigation我的 React Native 项目的库，并努力理解如何使用它处理状态。
在普通的 React Native 应用程序中，我可以通过 props 在顶级组件和来自子组件的 pop 事件中拥有状态，但是使用 React Navigation 似乎我无法将任何 props 传递给用作屏幕的组件。

通读后related GitHub issue似乎库开发人员非常固执地强制每个人使用某种全局事件处理程序 - redux 或 mobx，我猜。

The handler其中需要修改以下state .当我开始尝试在应用程序内移动状态时，我被卡住了，因为我不知道如何:

将处理程序传递给 TaskForm 组件。

如果它作为 App.js 的一部分呈现，则将状态作为 Prop 传递给 TaskList

请避免回复“只使用 redux”。我相信在这个例子中使用 redux 将是巨大的矫枉过正。

Answer 1

我在我的应用程序中使用 react native 和 react 导航，而没有使用 redux，到目前为止它运行良好。诀窍是路过screenProps一路下来。

例如，我有一个更多 View 。我创建了一个基本的 More View ，堆栈中有 2 个 subview :

class More extends Component {
    render() {
        return <something>
    }
}

class SubView1 extends Component {...}
class SubView2 extends Component {...}

然后我创建堆栈:

const MoreStack = StackNavigator({
More: {
    screen: More
}, 
SubView1: {
    screen: SubView1,
},
...
}, options);

然后我创建一个我导出的包装类:

export default class MoreExport extends Component {
    static navigationOptions = {
        title: "More"
    }

    render() {
        return <MoreStack screenProps={this.props.screenProps} />;
    }
}

如果所有这些都在 More.js 中，我可以从 More.js 导入 More 并在其他任何地方使用它。

如果我然后将 screenProps 传递给我的根 View ，然后为每一层设置一个包装类，我就可以一直向下传递 screenProps，并且所有 View 都可以使用 this.props.screenProps 访问它们。 .

我在每个 StackNavigator 和 TabNavigator 周围使用了类似上面的包装器，并且 screenProps 一直向下传递。

例如，在我的根类的 render 方法中，我可以这样做:

return <More screenProps={{prop1: something, prop2: somethingElse}} />

然后 MoreStack 中的 More 类和每个 subview 都可以访问这些 Prop 。

如果您需要更多说明，请随时告诉我!

免责声明:我不知道这是正确的还是推荐的方法，但它确实有效