RN 使用FlatList组件 一行显示 两列内容

需求：我在移动端分页请求书籍列表数据，移动端的操作方式，多数是上拉加载，下拉刷新，选择FlatList组件的原因，它可以内部处理 随着数据增加，而产生的渲染性能问题。

效果图如下：

 

代码如下

class SearchBook extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bookReource: [
        {bookName: '龙族', index: 0},
        {bookName: '天道', index: 1},
        {bookName: '斗破苍穹', index: 2},
        {bookName: '完美世界', index: 3},
        {bookName: '紫川', index: 4},
        {bookName: '斗罗大陆', index: 5},
        {bookName: '轮回', index: 6},
        {bookName: '众生叹', index: 7},
      ],
    };
  }
  render(){
    <FlatList
          data={this.state.bookReource}
          renderItem={({item}) => this.renderBookItem(item)}
          keyExtractor={(item) => item.index.toString()}
          numColumns={2}                       //1.一行显示两列
          showsVerticalScrollIndicator={false} //2. 不显示滑动指示器
     />
  }
  renderBookItem(item) {
    return (
      <View
        key={item.index}
        style={[
          styles.oneBook,
          item.index % 2 == 0
            ? styles.oneBookMarginRight
            : styles.oneBookMarginLeft,
        ]}>
        <Image
          style={styles.bookPoster}
          source={{uri:'在线图片路径'}}
        />
        <Text style={styles.bookTitle}>{item.bookName}</Text>
      </View>
    );
  }
}



let styles = StyleSheet.create({
  //展示书籍列表
  oneBook: {
    flex: 1, //flex设置1，可以沾满一半（因为显示两列）
    height: 230,
    borderRadius: 5,
    marginBottom: 12,
    backgroundColor: '#fff',
  },
  bookPoster: {
    borderTopRightRadius: 5,
    borderTopLeftRadius: 5,
    width: '100%',
    height: 200,
  },
  bookTitle: {
    flex: 1,
    fontSize: 14,
    textAlign: 'center',
    textAlignVertical: 'center',
  },
  oneBookMarginRight: {
    marginRight: 6,
  },
  oneBookMarginLeft: {
    marginLeft: 6,
  }
})