如何水平显示具有2列的Scrollview图像

时间:2019-03-25 05:08:57

标签: react-native

Hii,我要为此水平显示2列的图像,我正在使用scrollview,但是我不知道该怎么做,我正在使用以下代码

要获取api的代码

 componentDidMount(){
return fetch('https://www.json-generator.com/api/json/get/ccLAsEcOSq?indent=1')
  .then((response) => response.json())
  .then((responseJson) => {
    this.setState({
      isLoading: false,
      dataSource: responseJson.book_array,
    }, function(){
    });
  })
  .catch((error) =>{
    console.error(error);
  });

}

渲染代码

render() {
if (this.state.isLoading === true) {
  return <ActivityIndicator color={'red'} />;
}
return (
  <View style={styles.container}>
    <ScrollView horizontal={true}>
      {this.state.dataSource.map(item => this.renderItem(item))}
    </ScrollView>
  </View>
);

} }

renderItem的代码

renderItem(item) {
return (
  <View style={{ margin: 5 }}>
    <View style={{
        backgroundColor: 'red',
        width: 150,
        height: 150,
        marginBottom: 1,
      }}>
       <Image  style={{ width: 150,height: 150}}
                      source={{uri: item.image}}/>  
    </View> 

    <View style={{
        backgroundColor: 'red',
        width: 150,
        height: 150,
        marginBottom: 1,
      }}>
       <Image  style={{ width: 150,height: 150}}
                      source={{uri: item.image}}/>  
    </View> 

  </View>
);}

5 个答案:

答案 0 :(得分:2)

尝试flex-direction属性:

renderItem(item) {
return (
 <View style={{ margin: 5, flex: 1, flexDirection: "row", justifyContent: "space-around" }} >
    <View style={{ backgroundColor: "red", width: 150, height: 150, marginBottom: 1 }} >
      <Image style={{ width: 150, height: 150 }} source={{ uri: item.image }} />
    </View>
    <View style={{ backgroundColor: "red", width: 150, height: 150, marginBottom: 1 }} >
      <Image style={{ width: 150, height: 150 }} source={{ uri: item.image }} />
    </View>
  </View>
);}

答案 1 :(得分:2)

在滚动视图内像这样使用平面列表

<FlatList
    horizontal={true}
    data={this.state.dataSource}
    renderItem={({ item }) => (this.renderItem({item}))}
    />

像这样重新排列数据源

array1 = [obj1,obj2,obj3,obj4,obj5,obj6,obj7,
array2=[[obj1,obj2],[obj3,obj4],[obj5,obj6],[obj7,obj8]]

然后渲染2行的项目。

找不到其他方法

答案 2 :(得分:1)

尝试使用ScrollView道具代替FlatList,它提供numColumns道具,使您可以根据自己的选择使用列。

相反,

<ScrollView horizontal={true}>
      {this.state.dataSource.map(item => this.renderItem(item))}
</ScrollView>

使用此

<FlatList 
   data={this.state.dataSource}
   numColumns={2}
   renderItem={this.renderItem}
/>

有关FlatList的更多详细信息,请参见Official Docs Here

答案 3 :(得分:1)

像这样修改ScrollView组件:

<ScrollView horizontal={true} contentContainerStyle={{height:300, flexWrap:'wrap'}}>
{this.state.dataSource.map(item => this.renderItem(item))}
</ScrollView>

答案 4 :(得分:1)

要根据需要创建视图,需要实现自定义逻辑。在render函数中,调用一个中间函数以获取两行中的列:

render() {
if (this.state.isLoading === true) {
  return <ActivityIndicator color={'red'} />;
}
return (
  <View style={styles.container}>
    <ScrollView horizontal={true}>
        {this.renderHorizantol(this.state.dataSource)}
    </ScrollView>
  </View>
);

renderHorizantol函数中需要为偶数或奇数行设置逻辑,我正在dataSource Array的索引上实现这一点:

renderHorizantol = (dataSource) =>{
    let view = []
    for(let i=0 ; i < data.length ; i = i+2)
    {
        let subView = this.renderItem(dataSource[i],dataSource[i+1])
        view.push(subView)            
    }           
    return view 
}

renderItem函数中,传递两个元素以绘制上下行内容:

renderItem(item1,item2) {
    let image1 = item1["imageUrl"]
    let image2 = item2 ? item2["imageUrl"] : null
    return (
        <View style={{ margin: 5 }}>
        <View style={{
            backgroundColor: 'red',
            width: 150,
            height: 150,
            marginBottom: 1,
            }}>
            <Image  style={{ width: 150,height: 150}}
                            source={{uri: image1}}/>  
        </View> 

        <View style={{
            backgroundColor: 'red',
            width: 150,
            height: 150,
            marginBottom: 1,
            }}>
            <Image  style={{ width: 150,height: 150}}
                            source={{uri: image2}}/>  
        </View>     
    </View>
);}