Css React Native NavigatorIOS不呈现组件

我在

navigatorIOS

中呈现组件时遇到问题，我确信这是一个样式问题，但我无法确定在何处

我给出了flex:1 去除背景色 我给了一个余量

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

如果我在导航器外部抛出

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',
},
});

import MessageBoardTopics from./MessageBoardTopics.js'；
类MessageBoards扩展React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
}
render（）{
报税表（
);
}
};
module.exports=留言板；
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
},
});
var screenWidth=Dimensions.get（'window'）.width；
类MessageBoardTopics扩展了React.Component{
建造师（道具）{
超级（道具）；
var ds=新的ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
var data=PostStore.getState（）.posts；
this.state={sortText:'Sort by:Old'，
数据源：ds.cloneWithRows（data）}；
}
componentDidMount（）{
PostStore.listen（this.onChange）；
}
组件将卸载（）{
PostStore.unlisten（this.onChange）；
}
onChange（州）{
本.设置状态（状态）；
}
replyToMessage（）{
}
removeMessage（）{
}
sortMessages（）{
}
编辑消息（）{
}
按ROW（行数据）{
这个是.props.navigator.push({
标题：rowData.title，
组成部分：主题
});
}
render（）{
报税表（
fasdfafasdf
{this.state.sortText}
点击此按钮。按Row（rowData）}>
{rowData.title}
作者：{rowData.author}
}/>
);
}
};
module.exports=MessageBoardTopics；
var styles=StyleSheet.create({
容器：{
弹性：1，
玛金托普：80，
},
信息：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“白色”，
边框宽度：1，
边框颜色：“浅蓝色”，
填充：15，
},
信息标题：{
颜色：“灰色”，
textDecorationLine:“下划线”，
fontWeight:'粗体'，
},
消息作者：{
尺寸：10，
},
按钮栏：{
弹性体：.1，
自我定位：“拉伸”，
对齐项目：“居中”，
flexDirection:'行'，
},
中心按钮：{
弹性：1，
宽度：（屏幕宽度/2），
对齐项目：“居中”，
},
按钮：{
弹性：1，
textAlign:'中心'，
},
});

我需要为

navigatorIOS

编辑：当我从react native 0.16升级到0.17时，flex:1没有在

导航器上工作。我必须创建一个包装器组件，并给它一个
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> 
    );
  }
};

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