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

EN

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>
      );
    }
  }
}