css - React Native NavigatorIOS 不渲染组件

Question

我在 navigatorIOS 中渲染我的组件时遇到问题，我确定这是一个样式问题，但我无法确定位置。

我给了 flex : 1删除背景颜色我已经给了 margin

如其他堆栈溢出问题中所建议的那样。

如果我将 MessageBoardTopics 扔到导航器之外，它会正常呈现。

    import MessageBoardTopics from './messageBoardTopics.js';

    class MessageBoards extends React.Component{

        constructor(props){
            super(props);

        }

        componentDidMount(){

        }

      render() {
        return (        
        <View style={styles.container}>

            <NavigatorIOS
             style={{flex: 1}}
              initialRoute={{
                component: MessageBoardTopics,
                title: 'Forum',
              }}/>  
        </View> 
        );
      }
    };

    module.exports = MessageBoards;

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





var screenWidth = Dimensions.get('window').width;


class MessageBoardTopics extends React.Component{
    constructor(props){
        super(props);

        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var data = PostStore.getState().posts;
        this.state={sortText: 'Sort by: Old',
        dataSource: ds.cloneWithRows(data)};
    }

    componentDidMount() {
      PostStore.listen(this.onChange);
    }

    componentWillUnmount() {
      PostStore.unlisten(this.onChange);
    }

    onChange(state) {
     this.setState(state);
   }

    replyToMessage(){

    }

    removeMessage(){

    }

    sortMessages(){

    }

    editMessage(){

    }


    pressRow(rowData){  
        this.props.navigator.push({
            title: rowData.title,
            component: Topic
        });
    }

  render() {
    return (        
      <View style={styles.container}>
<Text>fasfasdfafasdf</Text>

        <View style={{flex: .2}}></View>
            <View style={styles.buttonBar}>
                <TouchableHighlight style={styles.centerButton} underlayColor={"lightred"} onPress={this.sortMessages}>
                    <Text>{this.state.sortText}</Text>
                </TouchableHighlight>
                <View style={styles.centerButton} underlayColor={"lightred"} onPress={this.newMessage}> 

                    <ComposeModal reply={this.replyToMessage} index={null}/>
                </View>
            </View> 

        <ListView
          dataSource={this.state.dataSource}
          style={{borderTopWidth: 2}}
          renderRow={(rowData) =>
            <TouchableHighlight underlayColor="lightgrey" onPress={()=>this.pressRow(rowData)}>
                <View style={styles.message}>
                    <Text style={styles.messageTitle}>{rowData.title}</Text>
                    <Text style={styles.messageAuthor}>By: <Text style={{color: 'blue', fontStyle: 'italic'}}>{rowData.author}</Text></Text>
                </View>
            </TouchableHighlight>}/>

     </View>
    );
  }
};

module.exports = MessageBoardTopics;

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 80,
  },
  message: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',   
    borderWidth: 1,
    borderColor: "lightblue",
    padding: 15,
},
 messageTitle: {
    color: 'grey',
    textDecorationLine: 'underline',
    fontWeight: 'bold',
},
 messageAuthor: {
    fontSize: 10,
},
buttonBar: {
    flex: .1,
    alignSelf: 'stretch',
    alignItems: 'center',
    flexDirection: 'row',
},
centerButton: {
    flex: 1,
    width: (screenWidth/2),
    alignItems: 'center',
    },
button: {
    flex: 1,
    textAlign: 'center',
},
});

Answer 1

我需要为 navigatorIOS 的包装器组件设置一个 width编辑:当我从 react-native 0.16 升级到 0.17 时，flex:1 无法在 navigatorIOS 上运行。我必须创建一个包装器组件并为其提供一个 flex。

这没有用。这是在我的 index.ios.js 文件中，它在 0.16 上呈现了 navigatorIOS。

  render() {
    return (        
    <View style={styles.container}>

        <NavigatorIOS
         style={{flex: 1, alignSelf: 'stretch'}}
          initialRoute={{
            component: MessageBoardTopics,
            title: 'Forum',
          }}/>  
    </View> 
    );
  }
};

在 react-native 0.17 上，我必须创建一个包装器组件并给它一个 flex 属性。我不得不更改我的 index.ios.js 来渲染它。

var forumComponent = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
    <MessageBoards style={{flex: 1}}/>
      </View>
    );
  }
});