在 react-native-table-component 中搜索答案

【问题标题】：Searching in react-native-table-component在 react-native-table-component 中搜索
【发布时间】：2019-12-29 07:40:59
【问题描述】：

在搜索栏中输入文本时，它应该在表数据中搜索以显示与搜索键匹配的行，但我无法在 react-native中找到确切所需的组件>。有人可以帮我解决这个问题吗？这是代码：

export default function ExampleOne() {
    const { loading, error, data } = useQuery(GET_USER_DETAILS);
    const head = ["id", "Name", "email"];
    if (loading) return <Text>Loading</Text>;
    if (error) return <Text>{`Error! ${error.message}`}</Text>;
    console.log(data.getUsers);
    const tableData = data.Users.map(rowObj => {
    delete rowObj["__typename"];
    return Object.values(rowObj);
    });
    return (
    <View style={styles.container}>
      <Table borderStyle={{ borderWidth: 1, borderColor: "#c8e1ff" }}>
        <Row
          data={head}
          style={styles.head}
          flexArr={[3, 2, 2]}
          textStyle={styles.text}
        />

        <Rows data={tableData} flexArr={[3, 2, 2]} textStyle={styles.text} />
      </Table>
    </View>
  );
}

【问题讨论】：

标签： react-native react-apollo

【解决方案1】：

您可以使用 SearchBar 从 react-native-elements 。 onChangeText搜索栏更新表格视图数据

完整的代码示例

export default class App extends React.Component {
  state = {
    search:"", 
    tableData: tableData: [
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd'],
        ['1', '2', '3', '3'],
        ['a', 'b', 'c', 'd']
      ],
  };

  updateSearch = search => {
    this.setState({ search });
    // update tableview data
  };

  render() {
    const { search } = this.state;

    return (
      <SearchBar
        placeholder="Type Here..."
        onChangeText={this.updateSearch}
        value={search}
      />
    );
  }

【讨论】：