Экран домашней страницы React Native Set / Основная активность

Винсент, я снова отвечу, используя ваши новые требования. Поскольку вам не нужно скрывать содержимое, если оно слишком длинное, вам не нужно плавать в заголовке. Просто поместите переполнение, скрытое в тегах html и body, и установите высоту #content на 100%. Содержимое всегда будет длиннее, чем область просмотра по высоте заголовка, но она будет скрыта и не будет вызывать полосы прокрутки.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>
0
задан Yohanes AI 16 January 2019 в 08:03
поделиться

1 ответ

React Navigation предоставляет способ для вашего приложения переходить между экранами. Согласно вашему требованию Splash Screen -> LoginScreen -> HomeScreen (with Bottom Navigation) вложенный стек навигации будет использоваться с StackNavigator & amp; TabNavigator.

для главного экрана необходимо создать StackNavigator:

const stackNavigationHome = createStackNavigator({ Home , HomeDetail});

Для экрана настроек StackNavigator, как показано ниже:

const stackNavigationSetting = createStackNavigator({ Settings},{headerMode: 'none'});

Оба Home & amp; Экран Settings будет отображаться в TabNavigator:

const TabNavigator = createBottomTabNavigator({
  home: stackNavigationHome,
  settings: stackNavigationSetting,
});

В начальной точке стека вам потребуется навигация по стеку с логином и вкладкой, как показано ниже:

const stackNavigationLogin = createStackNavigator({ Login, TabNavigator},{headerMode: 'none'});

Структура навигации завершена здесь, теперь нужно создать контейнер приложения:

export default createAppContainer(stackNavigationLogin);

Вы можете найти полный источник на Github

0
ответ дан Rocky 16 January 2019 в 08:03
поделиться
Другие вопросы по тегам:

Похожие вопросы: