Компонент не будет отображаться внутри NavigatorIOS - React Native

Я не могу заставить этот простой тест NavigatorIOS работать. Консоль записывает в My View триггеры, и я могу получить ее для рендеринга, если я пропущу компонент NavigatorIOS и сделаю MyView напрямую. Однако, когда MyView запускается из компонента в компоненте NavigatorIOS, он не будет отображать ничего, кроме "теста My NavigatorIOS".

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  NavigatorIOS,
  Text,
  View,
} = React;


 var navigation = React.createClass ({
  render: function() {
    return (
      <NavigatorIOS
            initialRoute={{
              component: MyView,
              title: 'My NavigatorIOS test',
              passProps: { myProp: 'foo' },
      }}/>
    );
  },
});


var MyView = React.createClass({
  render: function(){
    console.log('My View render triggered');
    return (
        <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello there, welcome to My View
        </Text>
      </View>
    );
  }
});


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});


AppRegistry.registerComponent('navigation', () => navigation);

Ответы

Ответ 1

У меня была аналогичная проблема. Я добавил следующее в мою таблицу стилей:

...
wrapper: {
  flex: 1,
}...

а затем дал NavigatorIOS компоненту стиль wrapper. Это устранило проблему.

Ответ 2

Добавьте стиль контейнера в NavigatorIOS, он должен быть гибким: 1, чтобы правильно показать дочерний компонент (у меня была такая же проблема).

Ответ 3

Я столкнулся с той же проблемой, моя ошибка была в стилях:

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

Мне пришлось удалить justifyContent и alignItems. Проблема решена для меня.

Ответ 4

У меня была такая же проблема. Оказалось, что я должен был добавить некоторый запас в верхнюю часть представления внутри компонента MyView.

Попробуйте следующее:

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  NavigatorIOS,
  Text,
  View,
} = React;


 var navigation = React.createClass ({
  render: function() {
    return (
      <NavigatorIOS
            style={styles.container}
            initialRoute={{
              component: MyView,
              title: 'My NavigatorIOS test',
              passProps: { myProp: 'foo' },
      }}/>
    );
  },
});


var MyView = React.createClass({
  render: function(){
    console.log('My View render triggered');
    return (
        <View style={styles.wrapper}>
        <Text style={styles.welcome}>
          Hello there, welcome to My View
        </Text>
      </View>
    );
  }
});


var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  wrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginTop: 80
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});


AppRegistry.registerComponent('navigation', () => navigation);

Ответ 5

У меня тоже была аналогичная проблема (глупо), поскольку я дал NavigatorIOS цвет фона, а это означало, что по какой-то причине он закрывал фактический компонент внутри него.

Ответ 6

У меня была аналогичная проблема, когда я использую Navigator и ничего не отвечаю на ответы. Поэтому я использую this.forceUpdate();, чтобы принудительно нажать кнопку "Обновить".

Ответ 7

Я встречаю ту же проблему. Для меня это проблема стиля. Я создаю и использую новый контейнер свойств свойстваNV для NavigatorIOS. Это решило мою проблему.

var styles = StyleSheet.create({
  containerNV: {
    flex: 1,
    backgroundColor: '#05FCFF',
  }
});

Ответ 8

Была та же проблема. На моем основном экране ничего не отображалось. Через 2 часа я решил удалить элемент <View>, с которым я обматывал навигатор, и внезапно все сработало.

Вкратце, я пошел от этого:

<View>
  <NavigatorIOS
    style={styles.container}
    initialRoute={{
      component: MainPage,
      title: 'MainPage',
    }}/>
</View>

к этому

<NavigatorIOS
  style={styles.container}
  initialRoute={{
    component: MainPage,
    title: 'MainPage',
}}/>