Thành phần sẽ không hiển thị trong NavigatorIOS - React Native

Question

Tôi không thể thực hiện kiểm tra NavigatorIOS đơn giản này để hoạt động. Nhật ký console trong My View kích hoạt, và tôi có thể làm cho nó hiển thị nếu tôi bỏ qua thành phần NavigatorIOS và kết xuất trực tiếp MyView. Tuy nhiên, khi MyView được kích hoạt từ một thành phần trong thành phần NavigatorIOS, nó sẽ không hiển thị bất kỳ điều gì khác ngoài 'kiểm tra NavigatorIOS của tôi'.

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

Answer 1

Thêm kiểu vùng chứa vào NavigatorIOS, cần phải uốn cong: 1 để hiển thị thành phần con đúng cách (Tôi có cùng vấn đề).

Answer 2

Tôi gặp vấn đề tương tự. Hóa ra tôi phải thêm một số lề vào đầu của khung nhìn bên trong thành phần MyView.

Hãy thử điều này:

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

Answer 3

Tôi đã có một vấn đề tương tự. Tôi được thêm vào sau để kiểu của tôi:

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

và sau đó đưa ra các thành phần NavigatorIOS các wrapper phong cách. Điều đó đã khắc phục được sự cố.

Answer 4

Tôi chạy vào cùng một vấn đề, sai lầm của tôi là trong phong cách:

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

tôi đã phải gỡ bỏ justifyContent và alignItems từ đó. Vấn đề được giải quyết cho tôi.

Answer 5

Tôi cũng có một vấn đề tương tự (ngu ngốc) vì tôi đã cho NavigatorIOS một màu nền, điều này có nghĩa là nó che phủ thành phần thực sự bên trong nó vì một lý do nào đó.

Answer 6

Tôi gặp sự cố tương tự khi sử dụng Điều hướng và không có gì giúp giải đáp. Vì vậy, tôi sử dụng this.forceUpdate(); để bắt buộc Cập nhật chức năng nhấn nút

Answer 7

Tôi gặp phải vấn đề tương tự. Đối với tôi, đó là vấn đề về phong cách. Tôi tạo và sử dụng một thùng chứa thuộc tính kiểu mớiNV cho NavigatorIOS. Điều đó đã giải quyết được vấn đề của tôi.

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

Answer 8

Có cùng vấn đề. Không có gì được hiển thị bên trong màn hình chính của tôi. Sau 2 giờ tôi quyết định loại bỏ các yếu tố <View> Tôi đã gói hoa tiêu của tôi với, và đột nhiên tất cả mọi thứ làm việc.

Tóm lại, tôi đã đi từ này:

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

này

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