警告:错误的支柱类型：“`array`”类型的“`textStyle`”无效，提供给` prop‘，预期的` `object`’

Question

这是我的代码，它将创建一个表，它运行良好，但每次它显示给我(警告:失败的道具类型:无效的支柱textStyle类型array提供给Cell，预期的object)。警告！！我该怎么做？

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';

export default class ExampleOne 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;
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
          <Rows data={state.tableData} 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 }
});

Answer 1

这是一个奇怪的问题，因为react-native-table-component的文档本身以与您相同的方式使用text-style支柱。有一个公开的问题报告同样的事情可能对你有帮助吗？https://github.com/Gil2015/react-native-table-component/issues/145

此外，如果您只想取消警告，则可以在app.js中从react本机导入Logbox并添加：LogBox.ignoreLogs(['Invalid prop textStyle of type array supplied to Cell']);。

Answer 2

react-native-table-component并不是由原来的开发人员维护的。像这样的警告在回购的问题一节中讨论过，并且有很好的叉子可以修复一些错误。来自@P.Brew的链接使我找到了一个肮脏的修复方法：

替换rows.js中的第29行

<Cell
  ...

  // textStyle={[cellTextStyle && cellTextStyle(item), textStyle]} // built-in, replace or edit
  textStyle={textStyle} // replace with this

  ...
/>

只有当您不打算使用cellTextStyle时，此修补程序才能起作用。如果这个警告不起作用，问题中还有其他选项。