[英]How To Set Fetch Data In To React-Native Table
As I am new to react native I don't know how to do this.由于我是新手,所以我不知道该怎么做。 I Need To Do, Set My API Data In To My React-Native Table.我需要做的是,将我的 API 数据设置到我的 React-Native 表中。 But I Have No Idea About That.但我对此一无所知。
When I Press The Button I Need To Load My Data In To Table.当我按下按钮时,我需要将我的数据加载到表中。
I Used react-native-table-component To Create Scroll Table View我使用 react-native-table-component 创建滚动表视图
export default class TableView2 extends Component {
constructor(props) {
super(props);
this.state = {
tableHead: [
'ID',
'Name',
'User Name',
'Gmail',
'Phone Number',
'WebSite',
],
widthArr: [40, 60, 80, 100, 120, 140,],
};
}
getData() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(responce => responce.json())
.then(data => {
this.setState({tableData: data...});
});
}
render() {
const state = this.state;
const tableData = [];
return (
<View style={styles.container}>
<ScrollView horizontal={true}>
<View>
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
<Row
data={state.tableHead}
widthArr={state.widthArr}
style={styles.header}
textStyle={styles.text}
/>
</Table>
<ScrollView style={styles.dataWrapper}>
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
{tableData.map((rowData, index) => (
<Row
key={index}
data={rowData}
widthArr={state.widthArr}
style={[
styles.row,
index % 2 && {backgroundColor: '#F7F6E7'},
]}
textStyle={styles.text}
/>
))}
</Table>
</ScrollView>
</View>
</ScrollView>
<Button rounded success onPress={this.getData.bind(this)}>
<Text>Success</Text>
</Button>
</View>
);
}
}
Thank You Very Much..!非常感谢您..!
You can try this:你可以试试这个:
export default class TableView2 extends Component {
constructor(props) {
super(props);
this.state = {
tableHead: [
'ID',
'Name',
'User Name',
'Gmail',
'Phone Number',
'WebSite',
],
widthArr: [40, 60, 80, 100, 120, 140,],
tableData:[]
};
}
getData() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(responce => responce.json())
.then(data => {
this.setState({
tableData: data
});
});
}
render() {
const state = this.state;
const { tableData } = state;
return (
<View style={styles.container}>
<ScrollView horizontal={true}>
<View>
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
<Row
data={state.tableHead}
widthArr={state.widthArr}
style={styles.header}
textStyle={styles.text}
/>
</Table>
<ScrollView style={styles.dataWrapper}>
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
{tableData.map((rowData, index) => (
<Row
key={index}
data={rowData}
widthArr={state.widthArr}
style={[
styles.row,
index % 2 && {backgroundColor: '#F7F6E7'},
]}
textStyle={styles.text}
/>
))}
</Table>
</ScrollView>
</View>
</ScrollView>
<Button rounded success onPress={this.getData.bind(this)}>
<Text>Success</Text>
</Button>
</View>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.