React native 如何在react native app下的表中显示对象的动态数组?
我正在构建一个react原生应用程序,从主屏幕移动到设置屏幕。我需要加载一个表格式的动态数组。现在我正在使用compoundDidMount函数从api获取数据。一切都很好,但我不知道如何渲染从compoundDidMount函数获得的输出数组React native 如何在react native app下的表中显示对象的动态数组?,react-native,react-native-android,render,React Native,React Native Android,Render,我正在构建一个react原生应用程序,从主屏幕移动到设置屏幕。我需要加载一个表格式的动态数组。现在我正在使用compoundDidMount函数从api获取数据。一切都很好,但我不知道如何渲染从compoundDidMount函数获得的输出数组 import React from 'react'; import { StyleSheet, Text, TextInput, View, Button, ImageBackground, Dimensions, Act
import React from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
Button,
ImageBackground,
Dimensions,
ActivityIndicator,
Alert,
ScrollView
} from 'react-native';
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
import { createAppContainer} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
import FormData from 'FormData';
import styles from "../css/styles";
export default class SettingsScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
tableHead: ['Head', 'Head2', 'Head3'],
widthArr: [40, 60, 80, 100, 120, 140, 160, 180, 200]
}
}
componentDidMount(){
return fetch('http://45.33.123.173:3000/query/get-history/Org2MSP.'+this.props.navigation.state.params.id)
.then((response)=> response.json())
.then((responseJson)=>{
console.log('meet history',JSON.stringify(responseJson));
console.log('meet history',responseJson[0]);
console.log('meet history',responseJson.length);
})
.catch((error)=>{
console.log(error)
});
}
render() {
const state = this.state;
const tableData = [];
for (let i = 0; i < state.myArray.length; i += 1) {
state.myArray[i].username
const rowData = [];
for (let j = 0; j < 9; j += 1) {
rowData.push(`${state.myArray[i].username}${state.myArray[i].balance}`);
}
tableData.push(rowData);
}
return (
<View style={styles1.container}>
<ScrollView horizontal={true}>
<View>
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
<Row data={state.tableHead} widthArr={state.widthArr} style={styles1.header} textStyle={styles.text}/>
</Table>
<ScrollView style={styles1.dataWrapper}>
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
{
tableData.map((rowData, index) => (
<Row
key={index}
data={rowData}
widthArr={state.widthArr}
style={[styles1.row, index%2 && {backgroundColor: '#F7F6E7'}]}
textStyle={styles1.text}
/>
))
}
</Table>
</ScrollView>
</View>
</ScrollView>
</View>
)
}
}
const styles1 = StyleSheet.create({
container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
header: { height: 50, backgroundColor: '#537791' },
text: { textAlign: 'center', fontWeight: '100' },
dataWrapper: { marginTop: -1 },
row: { height: 40, backgroundColor: '#E7E6E1' }
});
SettingsScreen.navigationOptions={
tabBarIcon:({tintColor, focused})=>(
<Icon
name={focused ? 'ios-settings' : 'md-settings'}
color={tintColor}
size={25}
/>
)
}
所以,正如您所说的,您是在fetch中获取数据,而不是在表中。因为您尚未按表中所需的状态保存数据 我粘贴的代码与您编写的代码相同,但做了一些修改
import React, {Component} from 'react';
import { StyleSheet, View, ScrollView} from 'react-native';
import { Table, Row} from 'react-native-table-component';
class SettingsScreen extends Component {
constructor(props) {
super(props);
this.state = {
myArray: [],
tableHead: ['ID', 'Name', 'Number'],
widthArr: [40, 100, 80, 100, 120, 140, 160, 180, 200]
}
}
componentDidMount(){
fetch('https://5df47c4bf9e7ae0014801983.mockapi.io/tabletest')
.then(response=>response.json())
.then(myArray=>{
this.setState({myArray})
})
}
render() {
const tableData = this.state.myArray.map(record=>([record.id, record.name, record.mobile]));
return (
<View style={styles1.container}>
<ScrollView horizontal={true}>
<View>
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
<Row data={this.state.tableHead} widthArr={this.state.widthArr} style={styles1.header} textStyle={styles1.text}/>
</Table>
<ScrollView style={styles1.dataWrapper}>
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
{
tableData.map((rowData, index) => (
<Row
key={index}
data={rowData}
widthArr={this.state.widthArr}
style={[styles1.row, index%2 && {backgroundColor: '#F7F6E7'}]}
textStyle={styles1.text}
/>
))
}
</Table>
</ScrollView>
</View>
</ScrollView>
</View>
)
}
}
const styles1 = StyleSheet.create({
container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
header: { height: 50, backgroundColor: '#537791' },
text: { textAlign: 'center', fontWeight: '100' },
dataWrapper: { marginTop: -1 },
row: { height: 40, backgroundColor: '#E7E6E1' }
});
export default SettingsScreen ;
输出:
如何添加分页和搜索过滤器非常有用