Question

在搜索栏中输入文本时，应在表格数据中搜索以显示帽子与搜索键匹配的行，而我无法在 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>
  );
}

Answer 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}
      />
    );
  }

搜索react-native-table-component

1 个答案: