react-native – 在React Native的ListView组件中渲染行

我在创建ListView时没有遇到任何问题,但我发现如果我想在View中渲染ListView它会中断并且滚动不再有效.

我知道两个元素不能在父视图中包装但不能彼此相邻但会破坏我的ListView.我的ListView在名为Main的React组件中以下列方式呈现.

renderMeeting(meeting) {
  return (
    <TouchableHighlight>
      <View>
        <View style={styles.container}>
          <View style={styles.imaging}>
                <Image source={{uri: meeting.Picture}} style={styles.thumbnail} />
          </View>
          <View style={styles.rightContainer}>
                <Text style={styles.meetingTime}>
                  {meeting.Time}
                </Text>
            <View style={styles.firstRow}>
                <Text style={styles.meetingName}>
                  {meeting.Name}
                </Text>
                <Text style={styles.Title}>
                  {meeting.Title}
                </Text>
                <Text style={styles.Company}>
                  @ {meeting.Company}
                </Text>
            </View>
            <View>
                <Text style={styles.meetingDescription}>
                  {meeting.Description}
                </Text>
            </View>
          </View>
        </View>
        <View style={styles.borderLine} />
      </View>
    </TouchableHighlight>
);
  }

  render() {
  return(
    <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMeeting.bind(this)}
        style={styles.listView} />  
      ); 
  }

};

当我在index.ios.js中的render方法只返回这个Main组件时,它可以正常工作：

render() {
  return (
    <Main>
  );
}

但是,如果我尝试将Main包装在View中,则它不起作用：

render() {
  return (
    <View>
      <Main>
    </View>
  );
}

如果我想要任何东西漂浮在ListView上,或者如果我想让它只有半页,我似乎无法让它工作,只要这个组件在任何地方都是父视图.

可能正在发生的事情是外部视图最终以0高度结束.你应该能够通过赋予它1的flex样式来修复它.

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

使用flex：1作为样式似乎可以像这样使用容器视图,所以它看起来像这样：

var styles = StyleSheet.create({
  container: {
    flex: 1
  }
});