在 React Native 的 ListView 组件中渲染行答案

【问题标题】：Rendering rows in React Native's ListView component在 React Native 的 ListView 组件中渲染行
【发布时间】：2015-07-18 15:09:21
【问题描述】：

创建ListView 没有问题，但我发现如果我想在View 内渲染ListView，它会中断并且滚动不再起作用。

我知道如果没有包裹在父 View 中，两个元素不能彼此相邻，但这会破坏我的 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 上，或者如果我想让它只有半页，只要这个组件在任何地方都是父视图，我似乎就无法让它工作。

【问题讨论】：

标签： react-native

【解决方案1】：

可能发生的事情是外部视图以 0 高度结束。你应该可以通过给它一个flex风格的1来解决问题。

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

使用flex: 1 作为样式似乎可以解决这样的容器视图，因此它可能看起来像这样：

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

【讨论】：