问React本机:基于图像的新闻提要的表现性绘制
EN

Stack Overflow用户

提问于 2016-03-30 13:50:54

回答 1查看 814关注 0票数 1

在react本机中呈现基于图像的新闻提要的最佳实践是什么？

我有一个非常简单的新闻提要，每个故事都有一个封面图片，然后是一个明星级别(由1-5张图片组成)。在最初的渲染中，图像似乎是以随机顺序加载的，而且看起来很糟糕，而且是非本地的。

这是一个7s视频，显示屏幕的转换和渲染。

是否有任何方法来控制图像呈现的顺序，或者在加载整个块之前不呈现一个故事？

如果有帮助，代码如下。使用IncrementalListView来呈现行。版本构建，iOS 9.3，iPhone 6。每个封面图像为~55 3kb的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>
      );
    }
  }
}