Question

所以我的应用程序中有一个位于屏幕顶部的路由器组件。此组件中有一个菜单按钮，在加载某些其他页面/组件时可以看到。

单击此菜单按钮时，我需要将此信息传达给当前正在显示页面的组件，以便它可以显示上下文菜单。

上下文菜单和菜单按钮均可独立工作。但是，我对如何连线感到困惑。如何有效地在这两个组件之间传递真/假切换？我以为我可以用道具来做，但后来我觉得你不能在道具通过后更新道具。这让我觉得我可能需要实现一个商店，这两个组件都可以读/写。这样，路由器组件将在每个菜单按钮点击时更新商店，而另一个组件可以根据商店的状态更新其状态，我可以使用该状态切换菜单可见/隐藏。

这是否有意义，如果是，那么解决它的最佳方式是什么？

路由器代码： - 单击“菜单”按钮时，父，menu()将触发

const RouterRecipeComponent = () => {
  function menu() {
    console.log('clicky');
  }

  const MenuIcon =
  (<TouchableOpacity
    onPress={() => menu()}
    style={{ backgroundColor: 'red', width: 30, height: 30 }}
  >
    <Text>MENU</Text>
  </TouchableOpacity>);


  return (
    <Router
      sceneStyle={styles.sceneStyleWithSettings}
      navigationBarStyle={styles.navBar}
      titleStyle={styles.navBarTitle}
      barButtonIconStyle={styles.barButtonIconStyle}
    >
      <Scene
        key="Recipes"
        component={Recipes}
        title={content.recipe_heading}
        rightTitle="Menu" initial
        renderRightButton={() => MenuIcon}
      />

食谱代码 - 显示一系列内容，包括设置面板（包含代码），在每次单击上述路由器代码中的菜单按钮时，该面板将切换为可见/隐藏。所以我的想法是能够切换状态settingsPanel true / false以显示以下内容：

renderSettingsPanel() {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    if (this.state.settingsPanel === true) {
      return (
        <View style={styles.settingsPanel}>
          {this.theSettings()}
        </View>
      );
    }
    return (
      <View style={[styles.settingsPanel, { top: -80, position: 'absolute', opacity: 10 }]}>
        {this.theSettings()}
      </View>
    );
  }

如果我传递道具或使用Redux，React native

0 个答案: