React Native Grid视图显示对照表
React Native Grid视图显示对照表
提问于 2016-11-30 07:07:11
使用react原生如何构建一个类似于https://www.edrawsoft.com/templates/images/smart-phone-comparison-table.png的对照表
如果可能的话，我也想有一个章节标题。例如，价格不在它自己的列中，但类似于iOS中的表节标题。列表视图将给出一列，但我想要多列
谢谢
编辑:下面的代码可以工作，但问题是如果我水平滚动，那么只有一个列表视图会滚动。我要他们两个都滚动。(我基本上是想做像excel一样的行和列，在我的例子中，数据可能很大(30行，5-8列)，我不想硬编码它。)
render() {
return (
<ScrollView>
<ListView horizontal
style={styles.container}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
<ListView horizontal
style={styles.container}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
</ScrollView>
)在下面的图像中，我希望两个列表视图都在滚动第二个时滚动，但如图所示，只有第二个ListView在滚动，而不是第一个。
回答 3
Stack Overflow用户
发布于 2016-11-30 12:44:08
这可以使用flex-box样式很容易地实现。如果你是React-native的新手。Listview乍一看有点让人望而生畏(数据源，有行的克隆是什么{rowHasChanged：( r1，r2) => r1 !== r2})??)为了保持它的简单性和更好地理解Flex-box，这应该是你的工作。但更推荐使用ListView。
import React, { Component } from 'react';
import { AppRegistry,View, ListView, StyleSheet,Text } from 'react-native';
class Example extends Component{
render() {
return (
<View style={{flex:1}}>
<View style={styles.Row}>
<View style={styles.Box1}>
<Text>Box 1</Text>
</View>
<View style={styles.Box2}>
<Text>Box 2</Text>
</View>
<View style={styles.Box1}>
<Text>Box 3</Text>
</View>
{/*
<View....
The more Views you add here the more horizontal Boxes you have
*/}
</View>
<View style={styles.Row}>
<View style={styles.Box2}>
<Text>Box 1</Text>
</View>
<View style={styles.Box1}>
<Text>Box 2</Text>
</View>
<View style={styles.Box2}>
<Text>Box 3</Text>
</View>
</View>
{/*
<View....
The more Views you add here the more rows you have
*/}
</View>
)
}
}
const styles = StyleSheet.create({
Row : {flex:1,flexDirection:'row'},
Box1 : {flex:1,backgroundColor:'tan',alignItems:'center',justifyContent:'center'},
Box2 : {flex:1,backgroundColor:'coral',alignItems:'center',justifyContent:'center'},
});
module.exports = ExampleStack Overflow用户
发布于 2016-12-01 23:47:47
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView
} from 'react-native';
class MultiScroll extends Component {
render() {
var tableData = []
for(i = 0; i < 90; i++){
tableData.push(['Row '+ i + ' Item 1','Row '+ i + ' Item 2','Row '+ i + ' Item 3','Row '+ i + ' Item 4','Row '+ i + ' Item 5','Row '+ i + ' Item 6','Row '+ i + ' Item 7','Row '+ i + ' Item 8','Row '+ i + ' Item 9','Row '+ i + ' Item 10'])
}
return (
<View>
<View style={{flexDirection:'row',marginTop:0}}>
<ScrollView>
<ScrollView horizontal = {true} showsHorizontalScrollIndicator= {false}>
<View style={{}}>
{
tableData.map((eachRow,j) => {
return (
<View style={{flexDirection:'row'}} key = {j}>
{
eachRow.map((eachItem,i) => {
return <View key = {i} style={{width:100,height:30,backgroundColor:(((j+i)%2)?'tan':'coral'),alignItems:'center',justifyContent:'center'}}><Text>{eachItem}</Text></View>
})
}
</View>
);
})
}
</View>
</ScrollView>
</ScrollView>
</View>
</View>
);
}
}
module.exports = MultiScroll
希望这能有所帮助:)
Stack Overflow用户
发布于 2016-12-01 09:11:48
<View>
<View style={{flexDirection:'row'}}>
<ScrollView horizontal ={true} showsHorizontalScrollIndicator= {false}>
<View style={{width:100,height:30}}><Text>Button</Text></View>
<View style={{width:100,height:30}}><Text>Button</Text></View>
<View style={{width:100,height:30}}><Text>Button</Text></View>
<View style={{width:100,height:30}}><Text>Button</Text></View>
<View style={{width:100,height:30}}><Text>Button</Text></View>
<View style={{width:100,height:30}}><Text>Button</Text></View>
<View style={{width:100,height:30}}><Text>Button</Text></View>
</ScrollView>
</View>
<View style={{flexDirection:'row'}}>
<ScrollView horizontal ={true} showsHorizontalScrollIndicator= {false}>
<View style={{width:100,height:30}}><Text>Button</Text></View>
<View style={{width:100,height:30}}><Text>Button</Text></View>
<View style={{width:100,height:30}}><Text>Button</Text></View>
<View style={{width:100,height:30}}><Text>Button</Text></View>
<View style={{width:100,height:30}}><Text>Button</Text></View>
<View style={{width:100,height:30}}><Text>Button</Text></View>
<View style={{width:100,height:30}}><Text>Button</Text></View>
</ScrollView>
</View>
</View> 我无法在注释中插入图像。因此，添加作为答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40877447
复制相关文章
相似问题
腾讯云开发者
