Question

我想为图像创建行，从_find函数接收。这个函数已经将数组分隔到子数组，其数量等于行数，我如何使用_find中的数据呈现行？不要用于反应的现成解决方案 - native-easy-grid，我想在没有其他库的情况下这样做，如果我用这种方式可以滚动项目吗？

＆＃13;

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View,StyleSheet,Button,Image,ScrollView,Dimensions,ListView } from 'react-native';
import Grid from './GridBuilder.js';
const regUrl =  /(src=")?(https:\/\/\S{2,500})(")/gm;
var IMAGES_PER_ROW = 3;
let app1;

export default class inputText extends Component {
  
  constructor(props) {
    super(props);
    app1 = this;
    
    this.state = {
      text: null,
      findEvent:false,
      im_p_r:3,
      items:{},
    };
  }
  
  render() {
    
    return (
      <View style={{margin: 20}}>
        <TextInput
          style = {styles.searchInput}
          placeholder="Type here to search"
          onChangeText={(text) => this.setState({text})}
        />
         <Button
          onPress={() => this._find(this.state.text)}s
          title='Find'
          color="#841584"
          accessibilityLabel="on"
        />
        {this.state.findEvent && <DisplayImage />}
      </View>
    );
  }
  _find(searchText){
    
  
    fetch('https://www.googleapis.com/customsearch/v1?key=AIzaSyAfcN3jfimFxHxpHNjhHOSuuY8dm5YZnqQ&cx=007223195539364418542:lcqjo0djp7k&num=10&q='+ searchText+'&searchType=image')
    .then((resp) => resp.json())
    .then(function(data) {
      let s = data.items;
      let SIZE = IMAGES_PER_ROW;

      let res = s.reduce((p,c)=>{
        if(p[p.length-1].length == SIZE){
          p.link.push([]);
        }
        
        p[p.length-1].push(c);
        return p.link;
      }, [[]])
      
      app1.setState({items:res,findEvent:true});
    
    })
    
  }
}
export class DisplayImage extends Component {
  
  render(){
    
    return(
       
      <View style={styles.container}>
       

          
          {app1.state.items.map((item,index) => <View style={styles.row} ><Image style={[styles.image,styles.box]} source={{uri:item.link}} key={index} /></View>)}    
          
        
      </View>  
    )
  }
}


const styles = StyleSheet.create({
  searchInput:{
    fontSize:20,
    paddingTop:20,
    paddingBottom:20
   
    
  },
  image:{
    paddingTop:20,
    width:100,
    height:100,
  },
  row: {
    flex: 1,
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'space-between'
    
  },
  box: {
    flex: 1,
    height: 100,
    width:100,
    backgroundColor: '#333',
  },

})
AppRegistry.registerComponent('inputText', () => inputText);
AppRegistry.registerComponent('DisplayImage', () => DisplayImage);

＆＃13;

Answer 1

您可以使用React Native中的FlatList。

{this.state.findEvent && <FlatList
  data={this.state.items}
  renderItem={({ item }) => this.renderItem(item)}
/>}

FlatList收到data要呈现的元素列表，在本例中为find函数返回的数据。

然后定义renderItem函数，如：

renderItem(item) {
    return ( 
        <View style={styles.row} >
            <Image 
               style={[styles.image,styles.box]}
               source={{uri:item.link}} key={index}
            />
        </View>
    ); 
}

此功能负责渲染图像列表，每个图像都可以根据需要进行渲染。

FlatList非常有用，使列表渲染更容易。默认情况下，您可以获得滚动，还可以渲染分隔符，进行刷新等操作。查看FlatList文档以查看所有可用属性。

Answer 2

以下是Flat list的工作示例，您可以通过该列表获取行中的图像 https://snack.expo.io/SJDoljDg7

Answer 3

FlatList是解决方法，但是我怀疑自最初接受的答案以来，规范已更改。现在，您必须提供一个密钥提取器，这是对我有用的示例：

const listItems = [
  {
    "id": 0.7967679550647925,
    "name": "Hcsrhjkh",
  },
  {
    "id": 0.3212834674770011,
    "name": "Phvdgbb",
  },
  {
    "id": 0.30092504022778455,
    "name": "Hnvdghbh",
  },
]

...

{listItems.length < 1 ? (
    <Text style={{ fontSize: 30 }}>Your list is empty.</Text>
) : (
    <FlatList
        data={listItems}
        renderItem={({item}) => <ListItem item={item} />}
        keyExtractor={(item) => item.id.toString()}
    />
)}

您可能已经发现，keyExtractor需要一个字符串，因此我将'id'强制为一个数字。

在React Native中创建行

3 个答案: