一个合适的 RNN V2 结构是什么样的？

Question

我一直在尝试制作一个合适的 RNN V2 树，但它对我来说没有任何意义......给出这个例子：

      root: {
            bottomTabs: {
                children: [
                    {
                        component: {
                            name: 'Main',
                            options: {
                                bottomTab: {
                                    text: 'Main',
                                },
                            },
                        },
                    },
                    {
                        component: {
                            name: 'Secondary',
                            options: {
                                bottomTab: {
                                    text: 'Secondary',
                                },
                            },
                        },
                    },
                ],
            },
        },
    }

假设我想告诉 Navigator 对活动的底部选项卡使用红色。如果我想实现这一点，那么我需要将 selectedTextColor 添加到 EACH COMPONENT

...component: {
   ...
   options: {
       ...
       selectedTextColor: 'red'
   }
}

与 bottomTabs 可见、隐藏等相同... 如何在parent中设置一次，让children继承这些选项？

Answer 1

每个 BottomTab 的选项已解析 bottom-up，因此 bottomTab 选项只能定义一次。

让我们看一个稍微复杂的布局，取自 playground 应用程序：

Navigation.setRoot({
  root: {
    bottomTabs: {
      id: 'BottomTabs',
      children: [
        {
          stack: {
            id: 'TAB1_ID',
            children: [
              {
                component: {
                  name: 'navigation.playground.TextScreen',
                  passProps: {
                    text: 'This is tab 1',
                    myFunction: () => 'Hello from a function!'
                  },
                  options: {
                    topBar: {
                      visible: true,
                      animate: false,
                      title: {
                        text: 'React Native Navigation!'
                      }
                    },
                  }
                }
              }
            ],
            options: {
              topBar: {
                visible: false
              },
              bottomTab: {
                text: 'Tab 1',
                icon: require('../images/one.png'),
                selectedIcon: require('../images/one.png'),
                testID: testIDs.FIRST_TAB_BAR_BUTTON
              }
            }
          }
        },
        {
          stack: {
            children: [
              {
                component: {
                  name: 'navigation.playground.TextScreen',
                  passProps: {
                    text: 'This is tab 2'
                  }
                }
              }
            ],
            options: {
              bottomTab: {
                text: 'Tab 2',
                icon: require('../images/two.png'),
                testID: testIDs.SECOND_TAB_BAR_BUTTON
              }
            }
          }
        },
        {
          component: {
            name: 'navigation.playground.TextScreen',
            passProps: {
              text: 'This is tab 3',
              myFunction: () => 'Hello from a function!'
            },
            options: {
              topBar: {
                visible: true,
                animate: false
              },
              bottomTab: {
                text: 'Tab 3',
                icon: require('../images/one.png'),
                selectedIcon: require('../images/one.png')
              }
            }
          }
        }
      ],
      options: {
        bottomTabs: {
          titleDisplayMode: 'alwaysShow',
          testID: testIDs.BOTTOM_TABS_ELEMENT
        }
      }
    }
  }
});

如您所见，BottomTab 选项可以在堆栈选项或组件选项中声明。这是因为每个选项卡的选项都是从其当前布局树中解析出来的。重要的是要记住选项已解析 bottom-up，这意味着更深的选项（从根声明更远）优先于更高的选项（更接近根声明）。

让我们仔细看看 BottomTab 的第一个 child。在这种情况下，它是一个 stack 声明 bottomTab 选项。推送到此堆栈的任何 child 都可以覆盖堆栈的 bottomTab 选项，因为它在布局树中更深 - 堆栈的选项可以被视为默认选项。

一个合适的 RNN V2 结构是什么样的？

How a proper RNN V2 structure looks like?

react-native

react-native-navigation

react-native-navigation-v2