Question

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

据我所知，如果两个元素没有包含在父View中但是会破坏我的ListView，则它们不能彼此相邻。我的ListView在名为Main的反应组件中以下列方式呈现。

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

};

当render中的index.ios.js方法只返回此Main组件时，它可以正常运行：

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

但是，如果我尝试将Main包裹在View中，则不起作用：

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

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

Answer 1

可能发生的事情是外部视图以0高度结束。您应该能够通过flex样式1来解决问题。

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

使用flex: 1作为样式似乎可以为这样的容器视图做到这一点，所以看起来像这样：

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

在React Native的ListView组件

1 个答案: