Как сделать так, чтобы верхняя и нижняя вкладки были на одной странице UI kitten React native - PullRequest
Новая
       5

Как сделать так, чтобы верхняя и нижняя вкладки были на одной странице UI kitten React native

0 голосов
/ 17 июня 2020

Привет, я пытаюсь создать приложение UI для котят в expo. Я хочу иметь страницу с тремя главными верхними вкладками, а на первой из трех основных вкладок есть нижние вкладки для отображения дополнительной информации.

Мой код ниже, я попытался создать верхнюю и нижнюю вкладки, но это не сработало, нижние вкладки были в середине экрана, а верхняя строка, указывающая, какая страница просматривается, была непосредственно под линией обзора верхних вкладок (касаясь). Затем я попытался просто создать нижние вкладки, но вкладки все равно показывались посередине, линия все еще была вверху, а не вкладки внизу экрана и линия внизу тоже. Все в самом внешнем <Layout></Layout> - это то, что возвращается и отображается на экране.

Я смотрю документацию, и нет примеров, где нижние вкладки отображаются внизу, поэтому я не знаю как я неправильно использую компоненты, это проблема стиля. Кроме того, если, возможно, есть более профессиональный способ показать больше информации, чем нижние вкладки внутри верхней вкладки, пожалуйста, дайте мне знать, я очень новичок. 

<Layout style={{ flex: 1 }}>
      <SafeAreaView style={{ flex: 1 }}>
        <TopNavigation
          title={'TITLE'}
          alignment="center"
          categorty="h1"
          accessoryLeft={renderBackAction}
        />

        <Divider />

        <TabView
          selectedIndex={state.selectedIndex}
          shouldLoadComponent={shouldLoadComponent}
          onSelect={(index) => setState({
              selectedIndex: index
          })}
          style={{ flex: 1 }}
        >

          <Tab title="TOP 1"> 
            <BottomNavigation
            selectedIndex={state.selectedIndex2}
            onSelect={(index2) => setState({
            selectedIndex2: index2
            })} 
            style={{ flex: 1}}>
              <BottomNavigationTab title='BOT 1'/>
              <BottomNavigationTab title='BOT 2'/>
              <BottomNavigationTab title='BOT 3'/>
            </BottomNavigation>

          </Tab>


          <Tab title="TOP 2">
            <Layout style={styles.tabContainer}>
              <Text category="h5">TOP 2</Text>
            </Layout>
          </Tab>


          <Tab title="TOP 3">
            <Layout style={styles.tabContainer}>
              <Text category="h5">TOP 3</Text>
            </Layout>
          </Tab>


        </TabView>
      </SafeAreaView>
</Layout>



const styles = StyleSheet.create({
  tabContainer: {
    alignItems: "center",
    justifyContent: "center",
    flex: 1

  },
});

Заранее большое спасибо за ваше помогите!

...