javascript - 如何在数据表反应原生纸中水平添加滚动条?
问题描述
嗨!我是反应原生开发和使用 expo-cli 的新手。我在我的应用程序中添加了一个 react-native-paper 数据表,它工作正常,但我有很多字段我想在水平方向滚动屏幕,但我不明白该由谁来做。请向我建议我可以为这个问题做些什么。
import React from 'react';
import { StyleSheet, Text, View, ScrollView, TextInput, Button, } from 'react-native';
import { Card } from "react-native-shadow-cards";
import {DataTable} from "react-native-paper"
const AllUsers = () =>{
return(
<View>
<View style={styles.headSection}>
<Text style={styles.titleHeading}>All Users</Text>
</View>
<ScrollView horizontal>
<DataTable style={styles.table} >
<DataTable.Header>
<DataTable.Title style={styles.header} > <Text style={styles.tableHeading}>Id</Text></DataTable.Title>
<DataTable.Title style={styles.header} > <Text style={styles.tableHeading} >Username</Text></DataTable.Title>
<DataTable.Title style={styles.header} > <Text style={styles.tableHeading} >First Name</Text></DataTable.Title>
<DataTable.Title style={styles.header} > <Text style={styles.tableHeading} >Last Name</Text></DataTable.Title>
<DataTable.Title style={styles.header} > <Text style={styles.tableHeading} >Email</Text></DataTable.Title>
<DataTable.Title style={styles.header} > <Text style={styles.tableHeading} >First Name</Text></DataTable.Title>
<DataTable.Title style={styles.header} > <Text style={styles.tableHeading} >Last Name</Text></DataTable.Title>
<DataTable.Title style={styles.header} > <Text style={styles.tableHeading} >Email</Text></DataTable.Title>
</DataTable.Header>
<DataTable.Row>
<DataTable.Cell>1.</DataTable.Cell>
<DataTable.Cell>adiljaz02</DataTable.Cell>
<DataTable.Cell>Adil</DataTable.Cell>
<DataTable.Cell>IJaz</DataTable.Cell>
<DataTable.Cell>adilijaz.02@gmail.com</DataTable.Cell>
<DataTable.Cell>Adil</DataTable.Cell>
<DataTable.Cell>IJaz</DataTable.Cell>
<DataTable.Cell>adilijaz.02@gmail.com</DataTable.Cell>
</DataTable.Row>
<DataTable.Row>
<DataTable.Cell>1.</DataTable.Cell>
<DataTable.Cell>adiljaz02</DataTable.Cell>
<DataTable.Cell>Adil</DataTable.Cell>
<DataTable.Cell>IJaz</DataTable.Cell>
<DataTable.Cell>adilijaz.02@gmail.com</DataTable.Cell>
<DataTable.Cell>Adil</DataTable.Cell>
<DataTable.Cell>IJaz</DataTable.Cell>
<DataTable.Cell>adilijaz.02@gmail.com</DataTable.Cell>
</DataTable.Row>
<DataTable.Row>
<DataTable.Cell>1.</DataTable.Cell>
<DataTable.Cell>adiljaz02</DataTable.Cell>
<DataTable.Cell>Adil</DataTable.Cell>
<DataTable.Cell>IJaz</DataTable.Cell>
<DataTable.Cell>adilijaz.02@gmail.com</DataTable.Cell>
<DataTable.Cell>Adil</DataTable.Cell>
<DataTable.Cell>IJaz</DataTable.Cell>
<DataTable.Cell>adilijaz.02@gmail.com</DataTable.Cell>
</DataTable.Row>
<DataTable.Pagination
page={1}
numberOfPages={3}
onPageChange={(page) => { console.log(page); }}
label="1-2 of 6"
/>
</DataTable>
</ScrollView>
</View>
)
}
const styles = StyleSheet.create({
table:{
},
headSection:{
borderBottomWidth:2,
borderColor:'black',
paddingBottom:15,
},
titleHeading:{
marginTop:50,
fontWeight:'bold',
marginHorizontal:167,
},
tableHeading:{
fontWeight:'bold',
color:'black',
},
header:{
paddingLeft:0,
},
});
export default AllUsers;
解决方案
要启用水平滚动,您可以将要滚动的内容放在 ScrollView 组件中,并以水平作为道具,如下所示:
<ScrollView horizontal>
<DataTable style={styles.table} >
<DataTable.Header>
<DataTable.Title style={styles.header} > <Text style={styles.tableHeading}>Id</Text></DataTable.Title>
<DataTable.Title style={styles.header} > <Text style={styles.tableHeading} >Username</Text></DataTable.Title>
<DataTable.Title style={styles.header} > <Text style={styles.tableHeading} >Email</Text></DataTable.Title>
</DataTable.Header>
<DataTable.Row>
<DataTable.Cell>1.</DataTable.Cell>
<DataTable.Cell>adiljaz02</DataTable.Cell>
<DataTable.Cell>adilijaz.02@gmail.com</DataTable.Cell>
</DataTable.Row>
<DataTable.Row>
<DataTable.Cell>2.</DataTable.Cell>
<DataTable.Cell>adil09</DataTable.Cell>
<DataTable.Cell>adili09@gmail.com</DataTable.Cell>
</DataTable.Row>
<DataTable.Pagination
page={1}
numberOfPages={3}
onPageChange={(page) => { console.log(page); }}
label="1-2 of 6"
/>
</DataTable>
</ScrollView>
推荐阅读
- node.js - SyntaxError:意外的令牌导入 - Node.js
- xamarin - Visual Studio 2017 15.8.4 在调试时不显示工具提示
- sql - 如何拒绝在 Firebird 中创建没有主键的表
- android - 引用 C++ 项目后,Android 应用不再从 Visual Studio 启动
- typescript - 使用Angular 6从数组中查找元素并在输入(或选择)中显示为列表(一一)的最佳方法
- liquid - 如何在条件语句中使用液体标签
- r - 存储 do.call("grid.arrange") 输出而不打印
- react-redux - 我可以用 redux 提供者和 apollo 提供者包装我的应用程序吗?
- python-3.x - how can i interpret max(stats,key=stats.get) where stats is some dictionary
- python - 从谷歌天气刮风速时,我能看到,但不能刮