ListView橫向

class TopicNewScreen extends Component {
  static navigatorStyle = {
    drawUnderNavBar: false,
    tabBarHidden: true
  };

  constructor(props) {
    super(props);
    let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      topics: [],
      page_topics: [],
      fromRabbit: this.props.Rabbit,
      isRefreshing: true,
      dataSource: ds.cloneWithRows(this.props.topics)
    };
    this.page = 1;
  }

  componentDidMount() {
    this.getTopicList(this.page);
  }

  componentWillReceiveProps(nextProps) {
    let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.setState({
      dataSource: ds.cloneWithRows(nextProps.topics)
    });
  }

  //獲取話題列表
  async getTopicList(page) {
    try {
      let c = API.encrypt([page]);
      let json = await API.callAPI('/api/v1/quan/subject1001.do', { c: c });
      if (json.code === '0' && json.obj) {
        let page_topics = json.obj;
        this.setState({
          isRefreshing: false,
          page_topics: page_topics,
          topics: this.state.topics.concat(page_topics)
        });
        this.props.dispatch(fetchTopicsAction(this.state.topics));
      }
    } catch (e) {
    }
  }

  onPressTopic(topic) {
    if (this.props.Rabbit === true) {//點擊小貓過來，將進入發話題界面
      let screenData = {
        title: '發佈話題',
        screen: 'hwy.CircleSendDynamicView',
        passProps: {
          fromRabbit: true,
          type: 'topic',
          topic: topic,
          gambitId: topic.id,
          circleid: 'topic' + topic.id//用於在redux裏面的分類（代表是哪一個話題下的動態）
        }
      };
      this.props.navigator.showModal(screenData);
    } else if (this.props.Rabbit === false) {//發話題頁面點擊選擇話題跳轉過來
      if (Platform.OS === 'ios') {
        this.props.navigator.pop();
      } else if (Platform.OS === 'android') {
        Navigation.dismissModal();
      }
    } else {//正常進入話題詳情頁面
      this.props.navigator.push({
        screen: 'hwy.TopicDetatilScreen',
        passProps: {
          topic: topic
        }
      });
    }
  }

  //下拉刷新
  async _onRefresh() {
    try {
      let c = API.encrypt([1]);
      let json = await API.callAPI('/api/v1/quan/subject1001.do', { c: c });
      if (json.code === '0' && json.obj) {
        let page_topics = json.obj;
        let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        this.setState({
          isRefreshing: false,
          page_topics: page_topics,
          topics: page_topics,
          dataSource: ds.cloneWithRows(page_topics)
        });
        //刷新之後，將頁數置爲1
        this.page = 1;
      }
    } catch (e) {
    }
  }

  //上拉加載
  async _onEndMore() {
    if (this.state.page_topics.length > 0) {
      this.page = this.page + 1;
      await this.getTopicList(this.page);
    }
  }

  _renderRow(rowData) {
    return (
      <Touchable onPress={() => this.onPressTopic(rowData)}
        style={{ marginTop: 2, borderRadius: 5 }}>
        <View style={{
          width: (widths - 22) / 2,
          height: (widths - 22) / 2 + 30,
          borderRadius: 5,
          overflow: 'hidden',
          backgroundColor: 'white'
        }}>
          <PlaceholderImage
            style={{ width: (widths - 22) / 2, height: (widths - 22) / 2, backgroundColor: '#e0e0e0' }}
            source={{ uri: helper.getCDNUrl('topic', rowData.smallPic, (widths - 22) / 2, 'S').url }}
            defaultSource={require('../../../img/[email protected]')}
            defaultStyle={{ height: 80, width: 80, backgroundColor: '#e0e0e0' }} />
          <View style={{
            height: 30,
            width: (widths - 22) / 2,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'white'
          }}>
            <Text style={{ fontSize: 12, color: colors.primaryText, alignItems: 'center', justifyContent: 'center' }}
              numberOfLines={1}>{rowData.title}</Text>
          </View>
        </View>
      </Touchable>
    );
  }

  render() {
    return (
      <ListView
        enableEmptySections={true}
        contentContainerStyle={styles.list}
        dataSource={this.state.dataSource}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        renderRow={this._renderRow.bind(this)}
        onEndReachedThreshold={10}
        onEndReached={this._onEndMore.bind(this)}
        refreshControl={
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={this._onRefresh.bind(this)}
            tintColor="gray"
            colors={['#ff0000', '#00ff00', '#0000ff']}
            progressBackgroundColor="gray" />
        } />
    );
  }
}

const styles = StyleSheet.create({
  list: {
    marginTop: 5,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    paddingBottom: 10
  },
});