React Native + response-native-router-flux: hideNavBar заставляет все компоненты исчезнуть

Question

В React Native с использованием response-native-router-flux, когда я пытаюсь скрыть панель навигации, все компоненты исчезают. Вот мой код:

<Router>
   <Stack key="root" >
      <Scene key="login" component={Login} title="Login" initial={true} hideNavBar={true}/>
      <Scene key="signup" component={Signup} title="Signup" />
   </Stack>
</Router>

Я пробовал другие альтернативные решения, но проблема все еще та же.

Вот как это выглядит без использования свойства hideNavBar.

Answer 1

просмотрев ваши закуски, я понимаю, что родительский компонент <View /> в App.js, кажется, вызывает проблему без каких-либо флагов ошибок. удалив его, компоненты снова появились. Я бы посоветовал вам добавить стиль css к каждому Scene в отдельности, что также даст вам детальный контроль. или вам, вероятно, придется переделать ваши компоненты, чтобы иметь базовую тему оформления. это обновленная закуска .

с использованием ^4.2.0 из react-native-router-flux, я могу повторить ваш пример без каких-либо проблем с компонентами, исчезающими при установке hideNavBar prop в true. поскольку у меня нет кода для ваших компонентов, я использую basi c View с Button для навигации между сценами стека.

я включил закуску здесь чтобы вы могли взглянуть и увидеть, что пошло не так. :)

import React, { Component } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { Router, Stack, Scene, Actions } from 'react-native-router-flux';

const Login = () => (
  <View style={styles.container}>
    <Button
      title="signup"
      onPress={() => Actions.signup()}
    />
  </View>
);

const Signup = () => (
  <View style={styles.container}>
    <Button
      title="login"
      onPress={() => Actions.login()}
    />
  </View>
);

export default class App extends Component {
  render() {
    return (
      <Router>
        <Stack
          key="root"
          // hideNavBar={true}
        >
          <Scene
            key="login"
            component={Login}
            title="Login"
            initial={true}
            hideNavBar={true}
          />
          <Scene
            key="signup"
            component={Signup}
            title="Signup"
            // hideNavBar={true}
          />
        </Stack>
      </Router>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ecf0f1',
    alignSelf: 'center',
    justifyContent: 'center',
    marginTop: 40,
    width: 100,
  },
});