Question

使用本机生成基于图像的新闻源的最佳做法是什么？

我有一个非常简单的新闻源，每个故事都有封面图片，然后是星级（由1-5张图片组成）。在初始渲染时，图像似乎以随机顺序加载，看起来很糟糕且非原生。

Here's a 7s video showing the screen transition and render.

有没有办法控制图像渲染的顺序，或者在整个块加载之前不渲染故事？

如果有帮助，代码如下。使用IncrementalListView呈现行。发布版本，iOS 9.3，iPhone 6.每个封面图片大约是55kb JPG，星星大约是3kb PNG。两张图片都打包成捆绑。

更新3/31

我更改了代码以使用IncrementalListView而不是直接渲染到ScrollView，但这没有帮助。问题似乎在于如何解码和渲染图像，而不是渲染行的方式。

class DiscoverRow extends React.Component {
  render() {
    let images = {
      wide: {
        data: require('../img/img-wide.jpg'),
        height: 200,
        width: 376
      }
    };
    let title = this.props.event.name;
    let date = "Tomorrow";
    let place = this.props.event.venue.name;
    const newHeight = images.wide.height / images.wide.width * screenWidth;
    return (

        <View style={[rowStyles.cell]}>
          <View style={{ borderRadius: 15 }}>
            <Image resizeMode={'stretch'} source={images.wide.data} style={[rowStyles.thumbnail]} />
            <View style={[rowStyles.annotationsContainer]}>
              <View style={rowStyles.textContainer}>
                <AHStarRating starColor={gConstants.themeColor} disabled rating={4.5} style={{ width: 100 }} />
                <AHText style={rowStyles.title}>{title}</AHText>
                <AHText style={rowStyles.date}>{date}</AHText>
              </View>
              <View style={rowStyles.commentsContainer}>
                <Image source={require('../img/chat.png')}
                  style={{ width: 36, height: 36,
                    tintColor: gConstants.themeColor,
                    backgroundColor: 'transparent' }}
                />
                <TouchableWithoutFeedback onPress={this._poop}>
                  <Image
                    source={require('../img/heart.png')}
                    style={{ width: 36, height: 36,
                      tintColor: gConstants.themeColor,
                      backgroundColor: 'transparent' }}
                  />
                </TouchableWithoutFeedback>
              </View>
            </View>
          </View>
        </View>
    );
  }
}

class DiscoverPage extends React.Component {

  static relay = {
    queries: { viewer: () => Relay.QL`query { viewer }` },
    fragments: {
      viewer: () => Relay.QL`
        fragment on Viewer {
          events {
            id
            name
            venue {
              name
            }
          }
        }
      `,
    },
  };

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.setState({ renderPlaceholderOnly: false });
    });
  }

  componentWillReceiveProps(nextProps) {
    if (!nextProps.relayLoading) {
      const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
      this.setState({
        dataSource: ds.cloneWithRows(nextProps.viewer.events),
      });
    }
  }

  _renderRow(event: Object, sectionID: number, rowID: number) {
      return <DiscoverRow
        onPress={() => Actions.event({ event })}
        key={`comment-${rowID}`} event={event}
      />;
  }

  render() {
    if (this.props.relayLoading || this.state.renderPlaceholderOnly) {
      return <View><AHText>Relay loading</AHText></View>;
    } else {
      return (
        <View style={styles.container}>
          <AHNavBar title={'Discover'} leftTitle={""} rightImage={require('../img/filter.png')} />
          <IncrementalListView
            initialListSize={3}
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}
            renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} 
            style={styles.separator} />}
          />
        </View>
      );
    }
  }
}

Answer 1

您应该使用ListView而不是ScrollView来实施。 ListView具有可提高滚动性能的性能优化。

来自ListView的React Native Docs部分：

有一些旨在制作ListView的性能操作动态加载可能非常大（或概念上无限的）数据集

React Native：基于图像的新闻源的高效渲染

1 个答案: