首页 文章

在React Native的ListView组件中呈现行

提问于
浏览
4

我没有遇到麻烦创建一个 ListView ,但我发现如果我想在 View 内部渲染 ListView 它会中断并且滚动不再有效 .

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

1 回答

  • 3

    可能正在发生的事情是外部视图最终以0高度结束 . 你应该能够通过给它 flex 样式 1 来解决问题 .

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

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

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

相关问题