У меня есть табличное представление, для которого я хочу отобразить данные формата 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 Имена столбцов данных инициализируются, как в коде.
Моя трассировка стека,
Нарушение инварианта: Нарушение инварианта: объекты недопустимы как дочерние элементы React (найдено: объект с ключами {Header, accessor}).Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.в RCTText (в Text.js: 154) в TouchableText (в Text.js: 278) в Text (в cell.js: 16) в RCTView (в View.js: 45) в View (в cell.js: 25)в ячейке (в rows.js: 21) в RCTView (в View.js: 45) в View (в rows.js: 17) в Row (в Example1.js: 73) в RCTView (в View.js: 45)в View (в table.js: 26) в Table (в Example1.js: 72) в RCTView (в View.js: 45) в View (в Example1.js: 71) в TableScreen (в SceneView.js: 9)в SceneView (в StackViewLayout.js: 786) в RCTView (в View.js: 45) в View (в StackViewLayout.js: 785) в RCTView (в View.js: 45) в View (в 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) в Screen (в StackViewCard.js: 57) в Card (в createPointerEventsContainer.js: 27) в контейнере (в StackViewLayout.js: 862) в RCTView (в View.js:45) в представлении (at screens.native.js: 83) вScreenContainer (в StackViewLayout.js: 313) в RCTView (в View.js: 45) в представлении (в createAnimatedComponent.js: 151) в AnimatedComponent (в StackViewLayout.js: 309) в PanGestureHandler (в StackViewLayout.js: 302)StackViewLayout (в withOrientation.js: 30) в withOrientation (в StackView.js: 79) в RCTView (в View.js: 45) в View (в Transitioner.js: 214) в Transitioner (в StackView.js: 22) вStackView (в createNavigator.js: 61) в Navigator (в createKeyboardAwareNavigator.js: 12) в KeyboardAwareNavigator (в createAppContainer.js: 387) в NavigationContainer (в renderApplication.js: 35) в RCTView (в View.js: 45) вПредставление (в AppContainer.js: 98) в RCTView (в View.js: 45) в представлении (в AppContainer.js: 115) в AppContainer (в renderApplication.js: 34)
Эта ошибка находится по адресу: в RCTText (в Text.js: 154) в TouchableText (в Text.js: 278) в Text (в cell.js: 16) в RCTView (в View.js: 45) в View (в cell.js: 25)) в ячейке (в rows.js: 21) в RCTView (в View.js: 45) в View (вrows.js: 17) в строке (в примере1.js: 73) в RCTView (в View.js: 45) в представлении (в table.js: 26) в таблице (в примере1.js: 72) в RCTView (вView.js: 45) в представлении (в примере1.js: 71) в TableScreen (в SceneView.js: 9) в SceneView (в StackViewLayout.js: 786) в RCTView (в View.js: 45) в представлении (вStackViewLayout.js: 785) в RCTView (в View.js: 45) в View (в StackViewLayout.js: 784) в RCTView (в View.js: 45) в View (в createAnimatedComponent.js: 151) в AnimatedComponent (вStackViewCard.js: 69) в RCTView (в View.js: 45) в представлении (at createAnimatedComponent.js: 151) в AnimatedComponent (в screens.native.js: 59) на экране (в StackViewCard.js: 57) в карточке(в createPointerEventsContainer.js: 27)в контейнере (в StackViewLayout.js: 862) в RCTView (в View.js: 45) в View (в screens.native.js: 83) в ScreenContainer (в StackViewLayout.js: 313) в RCTView (в View.js:45) в представлении (at createAnimatedComponent.js: 151) в AnimatedComponent (в StackViewLayout.js: 309) в PanGestureHandler (в StackViewLayout.js: 302) в StackViewLayout (в withOrientation.js: 30) в withOrientation (в Stack: в Stack79) в RCTView (в View.js: 45) в View (в Transitioner.js: 214) в Transitioner (в StackView.js: 22) в StackView (в createNavigator.js: 61) в Navigator (в 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) в представлении (в AppContainer.js: 98) в RCTView (в View.js: 45) в представлении (в AppContainer.js: 115) в AppContainer (в renderApplication.js: 34) throwOnInvalidObjectType reconcileChildFibers E: \ React-Native \ navigation \ node_modules \ реагировать-native \ Libraries \ PushNotificationIOS \ PushNotificationIOS.js: 339: 37 reconcileChildren E: \ React-Native \ navigation \ node_modules \ fbjs \ lib \ emptyFunction.js: 31: 2 updateHostComponent E: \ React-Native \ navigation \ node_modules \ реагировать-native \ Libraries \ BatchedBridge \ MessageQueue.js: 243: 17 executeUnitOfWork E: \ React-Native \ navigation \ node_modules \ prop-types \ factoryWithTypeCheckers.js: 353: 19 workLoop E: \ React-Native \ navigation \ node_modules \ prop-types \ factoryWithTypeCheckers.js: 386: 7 renderRoot executeWorkOnRoot E: \ React-Native \ navigation \ node_modules \ реагировать-native \ Библиотеки \ Utilities \ MatrixMath.js: 210: 4 executeWork E: \ React-Native \ navigation \ node_modules \act-native \ Libraries \ Utilities \ MatrixMath.js: 124: 23 executeSyncWork E: \ React-Native \ navigation \ node_modules \actate-native \ Библиотеки \ Utilities \ MatrixMath.js: 20: 19 batchedUpdates $ 1 E: \ React-Native \ navigation \ node_modules \ реагировать-native \ Libraries \ Utilities \ MatrixMath.js: 502: 20 batchedUpdates E: \ React-Native \ navigation \ node_modules \ реагировать-native \ Libraries \ Components \ ViewPager \ ViewPagerAndroid.android.js: 232: 19 _receiveRootNodeIDEvent receiveTouches
__ callFunction E: \ React-Native \ navigation \ node_modules \ реагировать-native \ Libraries \ ART \ ART \ ReactNativeART.js:465: 2
__ guard E: \ React-Native \ navigation \ node_modules \ реагировать-native \ Libraries \ ART \ ReactNativeART.js: 425: 8 callFunctionReturnFlushedQueue E: \ React-Native \ navigation \ node_modules \ реагироватьnative \ Libraries \ ART \ ReactNativeART.js: 222: 17 callFunctionReturnFlushedQueue [собственный код]