Как выглядит правильная структура RNN V2? - PullRequest
Новая
       50

Как выглядит правильная структура RNN V2?

0 голосов
/ 12 октября 2018

Я пытался создать правильное дерево RNN V2, но для меня это не имеет смысла ... учитывая этот пример: 

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

Итак, скажем, я хочу сказать навигатору:используйте красный цвет для активной нижней вкладки.Если я хочу добиться этого, тогда мне нужно добавить selectedTextColor к КАЖДОМУ КОМПОНЕНТУ 

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

То же самое с видимыми bottomTabs, скрыть и т. Д ... Как я могу установить его один раз в родительскоми пусть дети наследуют эти варианты?

1 Ответ

0 голосов
/ 13 октября 2018

Параметры разрешаются снизу вверх для каждого BottomTab, поэтому параметры bottomTab могут быть определены только один раз.

Давайте рассмотрим немного более сложный макет, взятый из приложения для детской площадки: 

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 могут быть объявлены либо в параметрах стека, либо в параметрах компонента.Это связано с тем, что параметры разрешаются для каждой вкладки из ее текущего дерева макетов.Важно иметь в виду, что параметры разрешаются снизу вверх, это означает, что более глубокие параметры (объявленные дальше от root) имеют приоритет над более высокими параметрами (объявленными ближе к root).

Позволяет более внимательно взглянуть на BottomTab.Первый ребенок.В этом случае это stack, который объявляет bottomTab опции.Любой дочерний элемент, помещенный в этот стек, может переопределить параметры стека bottomTab, так как он находится глубже в дереве компоновки. Параметры стека можно рассматривать как параметры по умолчанию.

...