我有一个表视图，我想为其显示JSON格式的数据。
我的数据经过硬编码，并且存在于程序中，因此无需调用任何函数。
我正在使用react-native-table-component。
以下是我的代码，
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';
export default class TableScreen extends Component {
constructor(props) {
super(props);
/*this.state = {
tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
tableData: [
['1', '2', '3', '4'],
['a', 'b', 'c', 'd'],
['1', '2', '3', '456\n789'],
['a', 'b', 'c', 'd']
]
}*/
}
render() {
//const state = this.state;
const data =
[{
item_no: 1,
item_name: 'Java',
item_cost: 26,
last_update: 3
},{
item_no: 2,
item_name: 'Kotilin',
item_cost: 50,
last_update: 34
},{
item_no: 3,
item_name: 'Gradle',
item_cost: 78,
last_update: 98
},{
item_no: 4,
item_name: 'C-Sharp',
item_cost: 15,
last_update: 19
},{
item_no: 5,
item_name: 'Objective C',
item_cost: 34,
last_update: 11
},{
item_no: 6,
item_name: 'Gremlin',
item_cost: 54,
last_update: 5
}]
const columns = [{
Header: 'Item Number',
accessor: 'item_no'
},{
Header: 'Item Name',
accessor: 'item_name'
},{
Header: 'Item Cost',
accessor: 'item_cost'
},{
Header: 'Last Update',
accessor: 'last_update'
}]
return (
<View style={styles.container}>
<Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
<Row data={columns} style={styles.head} textStyle={styles.text}/>
<Rows data={data} textStyle={styles.text}/>
</Table>
</View>
)
}
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
head: { height: 40, backgroundColor: '#f1f8ff' },
text: { margin: 6 }
});
我正在使用的访问器来自react-native-easy-grid，因此似乎table-component不支持它。
我想知道一种类似于访问器的方式，即JSON数据列名称的初始化类似于代码中的方式。
我的堆栈跟踪
不变违规：不变违规：对象作为 反应孩子（找到：带有键{Header，accessor}的对象）。如果你的意思是 要渲染子级集合，请改用数组。 在RCTText中（在Text.js：154处） 在TouchableText中（在Text.js：278） 在文本中（在cell.js：16处） 在RCTView中（在View.js：45） 在视图中（在cell.js：25） 在单元格中（在rows.js：21） 在RCTView中（在View.js：45） 在视图中（在rows.js：17处） 在行中（在Example1.js：73处） 在RCTView中（在View.js：45） 在View中（在table.js：26） 在表中（在Example1.js：72处） 在RCTView中（在View.js：45） 在视图中（在Example1.js：71处） 在TableScreen中（在SceneView.js：9） 在SceneView中（位于StackViewLayout.js：786） 在RCTView中（在View.js：45） 在视图中（在StackViewLayout.js：785处） 在RCTView中（在View.js：45） 在视图中（在StackViewLayout.js：784处） 在RCTView中（在View.js：45） 在View中（在createAnimatedComponent.js：151处） 在AnimatedComponent中（在StackViewCard.js：69处） 在RCTView中（在View.js：45） 在View中（在createAnimatedComponent.js：151处） 在AnimatedComponent中（在screens.native.js：59处） 在屏幕上（在StackViewCard.js：57上） 在Card中（在createPointerEventsContainer.js：27处） 在容器中（在StackViewLayout.js：862处） 在RCTView中（在View.js：45） 在视图中（在screens.native.js：83处） 在ScreenContainer中（在StackViewLayout.js：313处） 在RCTView中（在View.js：45） 在View中（在createAnimatedComponent.js：151处） 在AnimatedComponent中（在StackViewLayout.js：309处） 在PanGestureHandler中（位于StackViewLayout.js：302） 在StackViewLayout中（位于withOrientation.js：30） 在withOrientation中（在StackView.js：79处） 在RCTView中（在View.js：45） 在视图中（在Transitioner.js：214） 在Transitioner中（位于StackView.js：22） 在StackView中（位于createNavigator.js：61处） 在导航器中（位于createKeyboardAwareNavigator.js：12处） 在KeyboardAwareNavigator中（位于createAppContainer.js：387） 在NavigationContainer中（在renderApplication.js：35处） 在RCTView中（在View.js：45） 在View中（在AppContainer.js：98） 在RCTView中（在View.js：45） 在View中（在AppContainer.js：115） 在AppContainer中（位于renderApplication.js：34）
此错误位于： 在RCTText中（在Text.js：154处） 在TouchableText中（在Text.js：278） 在文本中（在cell.js：16处） 在RCTView中（在View.js：45） 在视图中（在cell.js：25） 在单元格中（在rows.js：21） 在RCTView中（在View.js：45） 在视图中（在rows.js：17处） 在行中（在Example1.js：73处） 在RCTView中（在View.js：45） 在View中（在table.js：26） 在表中（在Example1.js：72处） 在RCTView中（在View.js：45） 在视图中（在Example1.js：71处） 在TableScreen中（在SceneView.js：9） 在SceneView中（位于StackViewLayout.js：786） 在RCTView中（在View.js：45） 在视图中（在StackViewLayout.js：785处） 在RCTView中（在View.js：45） 在视图中（在StackViewLayout.js：784处） 在RCTView中（在View.js：45） 在View中（在createAnimatedComponent.js：151处） 在AnimatedComponent中（在StackViewCard.js：69处） 在RCTView中（在View.js：45） 在View中（在createAnimatedComponent.js：151处） 在AnimatedComponent中（在screens.native.js：59处） 在屏幕上（在StackViewCard.js：57上） 在Card中（在createPointerEventsContainer.js：27处） 在容器中（在StackViewLayout.js：862处） 在RCTView中（在View.js：45） 在视图中（在screens.native.js：83处） 在ScreenContainer中（在StackViewLayout.js：313处） 在RCTView中（在View.js：45） 在View中（在createAnimatedComponent.js：151处） 在AnimatedComponent中（在StackViewLayout.js：309处） 在PanGestureHandler中（位于StackViewLayout.js：302） 在StackViewLayout中（位于withOrientation.js：30） 在withOrientation中（在StackView.js：79处） 在RCTView中（在View.js：45） 在视图中（在Transitioner.js：214） 在Transitioner中（位于StackView.js：22） 在StackView中（位于createNavigator.js：61处） 在导航器中（位于createKeyboardAwareNavigator.js：12处） 在KeyboardAwareNavigator中（位于createAppContainer.js：387） 在NavigationContainer中（在renderApplication.js：35处） 在RCTView中（在View.js：45） 在View中（在AppContainer.js：98） 在RCTView中（在View.js：45） 在View中（在AppContainer.js：115） 在AppContainer中（位于renderApplication.js：34）
此错误位于： 在NavigationContainer中（在renderApplication.js：35处） 在RCTView中（在View.js：45） 在View中（在AppContainer.js：98） 在RCTView中（在View.js：45） 在View中（在AppContainer.js：115） 在AppContainer中（在renderApplication.js：34处）throwOnInvalidObjectType reconcileChildFibers E：\ React-Native \ navigation \ node_modules \ react-native \ Libraries \ PushNotificationIOS \ PushNotificationIOS.js：339：37 和解孩子 E：\ React-Native \ navigation \ node_modules \ fbjs \ lib \ emptyFunction.js：31：2 updateHostComponent E：\ React-Native \ navigation \ node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：243：17 performUnitOfWork E：\ React-Native \ navigation \ node_modules \ prop-types \ factoryWithTypeCheckers.js：353：19 工作循环 E：\ React-Native \ navigation \ node_modules \ prop-types \ factoryWithTypeCheckers.js：386：7 renderRoot performWorkOnRoot E：\ React-Native \ navigation \ node_modules \ react-native \ Libraries \ Utilities \ MatrixMath.js：210：4 performWork E：\ React-Native \ navigation \ node_modules \ react-native \ Libraries \ Utilities \ MatrixMath.js：124：23 performSyncWork E：\ React-Native \ navigation \ node_modules \ react-native \ Libraries \ Utilities \ MatrixMath.js：20：19 批处理更新$ 1 E：\ React-Native \ navigation \ node_modules \ react-native \ Libraries \ Utilities \ MatrixMath.js：502：20 批处理更新 E：\ React-Native \ navigation \ node_modules \ react-native \ Libraries \ Components \ ViewPager \ ViewPagerAndroid.android.js：232：19 _receiveRootNodeIDEvent receiveTouches
__ callFunction E：\ React-Native \ navigation \ node_modules \ react-native \ Libraries \ ART \ ReactNativeART.js：465：2
__后卫 E：\ React-Native \ navigation \ node_modules \ react-native \ Libraries \ ART \ ReactNativeART.js：425：8 callFunctionReturnFlushedQueue E：\ React-Native \ navigation \ node_modules \ react-native \ Libraries \ ART \ ReactNativeART.js：222：17 callFunctionReturnFlushedQueue [本地代码]