在 React Native 的 ListView 组件中渲染行 [英] Rendering rows in React Native's ListView component

问题描述

我在创建 ListView 时没有遇到任何问题，但我发现如果我想在 View 内部呈现该 ListView中断并且滚动不再起作用.

I'm having no trouble create a ListView, but I find that if i want to render that ListView inside of a View it breaks and the scroll no longer works.

我知道两个元素不能在没有被包裹在父 View 中的情况下彼此相邻，但这会破坏我的 ListView.我的 ListView 在名为 Main 的 React 组件中按以下方式呈现.

I understand that two elements can't be next to one another without being wrapped in a parent View but that breaks my ListView. My ListView is rendered the following way, within a React Component named 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} />  
      ); 
  }

};

当我在 index.ios.js 中的 render 方法只返回这个 Main 组件时，它工作得很好:

When my render method in index.ios.js just returns this Main component, it works just fine:

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

但是，如果我尝试将 Main 包装在 View 中，它不起作用:

However, if I attempt to wrap Main within a View, it does not work:

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

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

If I want anything to float over the ListView or if I want to have it only be half page I can't seem to get it to work as long as this component is anywhere is a parent view.

推荐答案

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

Probably what's happening is the outer view is ending up with a 0 height. You should be able to fix things by giving it a flex style of 1.

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

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

Using flex: 1 as a style seems to do the trick for container views like this so it could look something like this:

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

这篇关于在 React Native 的 ListView 组件中渲染行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！