在ReactNative中从Listview创建GridView？（不使用库） [英] Creating a GridView From Listview in ReactNative?(Without using libraries)
本文介绍了在ReactNative中从Listview创建GridView？（不使用库）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
到目前为止，我已经成功地获得了结果在行中显示使用ListView组件（即每行2个结果，请参见截图）。
在一行中。网格显示单个人的数据，我希望以连续的方式重复
的细节。
< / Content>
< View style = {{backgroundColor：'white'}}>
< Text style = {{color：'black'，fontSize：17，marginTop：25，marginLeft：15}}> Employees< / Text>
< / View>
< List dataArray = {currentContext.props.employeeList}
renderRow = {（data）=>
< ListItem>
{this.renderRow（data）}
< / ListItem>
} />
< / Content>
函数renderRow（data）由
renderRow（data）{
return（
typeOne（）
）
函数typeOne（）{
return
< View style = {styles.gridContainer}>
< Content contentContainerStyle = {{
padding：6，
paddingBottom：0
}}>
< View style = {{flex：1，}}>
< Row>
{renderCell（data.photo_url，0，data.name）}
{ renderCell（data.photo_url，1，data.name）}
< / Row>
< / View>
< / Content>
< / View>
函数renderCell（bg，pos，title）{
if（pos％2 == 0）{
return（
< Col style = {[ （bg，title）}
< （
< Col style = {[{marginLeft：3}，styles.colStyle]}>
{cellContent（bg，title）}
< / Col>
）
函数cellContent（bg，title）{
if（bg == null）{
return null
}
return （
< Button style = {{flex：1，alignSelf：'stretch'}} underLayouColor ='red'>
< View style = {styles.cellContent}>
< Image style = {{height：230，alignItems：'stretch'}} source = {{uri：bg}} blurRadius = {1} />
< View style = {[styles.cellTitleBg， {opacity：0.5，marginTop：10}]}>
< Text style = {[styles.cellTitle，{position：'absolute'，bottom：0，right：5}]}> {title} < / Text>
< / View>
< / View>
< / Button>
）
}
}
}
}
如何让列表视图返回每行2个数据？
我会在下面的链接给你提供类似的问题以供参考
请帮我解决这个问题。
样式部分
const styles = StyleSheet.create（{
容器：{
flex：1，
backgroundColor：'white'，
}，
按钮：{
颜色：'white'
}，
overLayView：{
position：'absolute'，
alignSelf：'center'，
}，
gridContainer：{backgroundColor：' ＃EDF0F2'，flex：1，}，
colStyle：{height：210，flex：1，marginBottom：6，marginRight：10，marginLeft：10}，
cellContent：{position：'absolute' ，left：0，right：0，top：0，bottom：0}，
cellTitleBg：{bottom：65，backgroundColor：'＃778899'，height：35}，
cellTitle：{bottom： 65，color：'white'，fontWeight：'bold'，fontSize：17，right：0，textAlign：'right'，right：0}
}）
将renderRow函数的索引传递给定义了该视图的函数。
< Button key = {index} style = {{flex：1，alignSelf：'stretch'}} underLayouColor ='red'>
< View key = {index} style = {styles.cellContent}>
< Image key = {index} style = {{height：230，alignItems：'stretch'}} source = {{uri：bg}} blurRadius = {1} />
< View key = {index} style = {[styles.cellTitleBg，{opacity：0.5，marginTop：10}]}>
< Text key = {index} style = {[styles.cellTitle，{position：'absolute'，bottom：0，right：5}]}> {title}< / Text>
< / View>
< / View>
< / Button>
Consider a simple app in React Native that fetches listings from a remote JSON source and displays them on screen.
So far,I've managed to get the results to display using the ListView components in rows (i.e. 2 result per row, see screenshot).
in one row.both the grids display data of a single person,i want details in a consecutive manner not repeating.
</Content>
<View style={{backgroundColor: 'white'}}>
<Text style={{color: 'black',fontSize: 17,marginTop: 25,marginLeft: 15}}>Employees</Text>
</View>
<List dataArray={currentContext.props.employeeList}
renderRow={(data) =>
<ListItem>
{this.renderRow(data)}
</ListItem>
} />
</Content>
The function renderRow(data) is given by
renderRow(data){
return(
typeOne()
)
function typeOne(){
return(
<View style={styles.gridContainer}>
<Content contentContainerStyle={{
padding:6,
paddingBottom:0
}}>
<View style={{flex:1,}}>
<Row>
{renderCell(data.photo_url, 0,data.name)}
{renderCell(data.photo_url, 1,data.name)}
</Row>
</View>
</Content>
</View>
)
function renderCell(bg,pos,title){
if (pos%2==0) {
return(
<Col style={[{marginRight:3},styles.colStyle]}>
{cellContent(bg,title)}
</Col>
)
}else{
return(
<Col style={[{marginLeft:3},styles.colStyle]}>
{cellContent(bg,title)}
</Col>
)
}
function cellContent(bg,title){
if(bg==null){
return null
}
return(
<Button style={{flex:1,alignSelf:'stretch'}} underLayouColor='red'>
<View style={styles.cellContent}>
<Image style={{height:230,alignItems: 'stretch'}} source={{uri:bg}} blurRadius={1}/>
<View style={[styles.cellTitleBg,{opacity: 0.5,marginTop: 10}]}>
<Text style={[styles.cellTitle,{position:'absolute',bottom:0,right:5}]}>{title}</Text>
</View>
</View>
</Button>
)
}
}
}
}
How can get the list-view to return 2 data's per row ?
I will give you similar question for reference in the below link
please help me solve this issue.
The style part
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor:'white',
},
button:{
color:'white'
},
overLayView: {
position:'absolute',
alignSelf:'center',
},
gridContainer: {backgroundColor:'#EDF0F2',flex:1,},
colStyle:{height:210,flex:1,marginBottom:6,marginRight:10,marginLeft:10},
cellContent:{position:'absolute',left:0,right:0,top:0,bottom:0},
cellTitleBg:{bottom:65,backgroundColor:'#778899',height:35},
cellTitle:{bottom:65,color:'white',fontWeight:'bold',fontSize:17,right:0,textAlign:'right',right:0}
})
解决方案
Try this out...
pass index from the renderRow function down to this function where this view is defined.
<Button key={index} style={{flex:1,alignSelf:'stretch'}} underLayouColor='red'>
<View key={index} style={styles.cellContent}>
<Image key={index} style={{height:230,alignItems: 'stretch'}} source={{uri:bg}} blurRadius={1}/>
<View key={index} style={[styles.cellTitleBg,{opacity: 0.5,marginTop: 10}]}>
<Text key={index} style={[styles.cellTitle,{position:'absolute',bottom:0,right:5}]}>{title}</Text>
</View>
</View>
</Button>
这篇关于在ReactNative中从Listview创建GridView？（不使用库）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
