組件不會在NavigatorIOS內呈現 - React Native

我無法讓這個簡單的NavigatorIOS測試正常工作。控制檯登錄My View triggeres，如果我跳過NavigatorIOS組件，並直接渲染MyView，我可以獲取它。但是，當MyView由NavigatorIOS組件中的組件觸發時，它不會呈現「我的NavigatorIOS測試」以外的任何內容。組件不會在NavigatorIOS內呈現 - React Native

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);

來源

2015-03-31 mrborgen

將容器樣式添加到NavigatorIOS，它需要是flex：1以正確顯示子組件（我有同樣的問題）。

來源

2015-03-31 11:55:32 deanmcpherson

我只是想說，但我只是得到一個白色的屏幕。導航頭也不見了......你知道爲什麼嗎？ – mrborgen 2015-03-31 12:01:39

謝謝。你甚至想過這樣做？你有什麼想法，爲什麼？ – 2015-07-01 17:52:56

React原生樣式使用flexbox模型進行一些更改，flex：1屬性僅告訴組件使用所有可用空間。在這種情況下它類似於說100％的高度。 – deanmcpherson 2015-07-07 04:47:59

我有同樣的問題。原來，我不得不在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);

來源

2015-03-31 12:45:04 stp

MyView沒有顯示在導航中，只有導航顯示 – sandy 2016-04-04 09:41:49

這是唯一幫助我的答案。 NavigatorIOS中的style.container非常重要。 – Boomerange 2016-10-06 10:17:29

我怎樣才能得到正確的邊緣？ – 2017-11-23 16:07:09

我也有類似的問題。添加以下到我的樣式表：

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

然後再去NavigatorIOS組件wrapper風格。這解決了這個問題。

來源

2015-03-31 14:14:37

謝謝。這工作。 – 2015-04-26 20:09:46

@mrborgen這將是一個不錯的答案。你不會繼續並且標記這個嗎？ – Jack 2015-07-14 20:36:13

Wohaa工作。爲什麼它沒有在文檔中提到... – varun 2016-02-01 06:31:31

我碰到了同樣的問題，我的錯誤是在款式：

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

我不得不從那裏取出justifyContent和alignItems。問題解決了我。

來源

2015-04-07 14:27:33 ilansas

這對我來說很有效，看起來你是在關注egghead.io上的反應原生教程：P – Jayem 2016-09-10 13:42:44

我有一個類似的問題（愚蠢），因爲我給了NavigatorIOS一個背景顏色，這意味着它由於某種原因掩蓋了它內部的實際組件。

來源

2015-04-09 02:52:04 koriner

No ...背景應該指的是組件的背後。我認爲你很好。在本機iOS中，導航器甚至沒有視圖。 – 2015-07-01 17:56:19

我在使用Navigator時遇到了類似的問題，而且沒有任何幫助。所以我用this.forceUpdate（）;強制更新按鈕按下功能

來源

2015-12-01 06:55:56 passol

我遇到同樣的問題。對我而言，這是風格問題。我爲NavigatorIOS創建並使用新的樣式屬性containerNV。這解決了我的問題。

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

來源

2016-06-16 13:38:15 singkeam86

有同樣的問題。我的主屏幕內沒有渲染。 2小時後，我決定刪除我用導航儀包裝的<View>元素，並突然發現一切正常。

概括地說，我從這個去：

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

這個

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

來源

2017-05-07 22:05:29

組件不會在NavigatorIOS內呈現 - React Native

回答

相關問題