Reactnative 根据搜索字符串中的每个字母过滤数组

function Test() {
  const txt = 'a'
  const fruit = [
    { name: 'apple' },
    { name: 'orange' },
    { name: 'kiwi' },
    { name: 'banana' },
    { name: 'lemon' },
  ]

  return (
    <FlatList
      data={fruit.filter((item) => String(item.name).includes(txt))}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  )
}

export default Test

apple
orange
banana

apple
orange

const txt = 'ae'
const fruit = [
    { name: 'apple' },
    { name: 'orange' },
    { name: 'kiwi' },
    { name: 'banana' },
    { name: 'lemon' },
]

const search = (arr, str) => {
   const chars = str.split('');
   return arr.filter(
      item => chars.every(char => item.name.includes(char)) );
}

console.log(search(fruit, txt) )

React-native相关问答推荐

复制__自持props

如何在Reaction Native中将身体分成三部分

ReactNative：在所有组件和操作之间共享 sqlite 实例的最佳方法

React Native - remount / reset / reload屏幕的最佳方式是什么？

React Native Child Parent 通信

使用 React-Native 将 content：// URI 转换为 Android 的实际路径

Invariant Violation：Chrome 不支持在本机模块上调用同步方法

react-native alignSelf 中心并拉伸到 maxWidth？

TabNavigator 中的 React Navigation 传递props

如何在react-native android中打开应用程序设置页面？

如何在 React-Native Android 中检测拖动事件的结束

如何手动在抽屉导航底部添加额外的元素(如注销按钮)？

react Navigation 在标题中使用图像？

props验证中缺少 React Navigation 'navigation'

require() 必须有一个字符串文字参数 React Native

React Native Expo StackNavigator 重叠通知栏

将 react-native 元素Bundle 为 iOS 框架或 (.aar) Android 库

如何将样式传递给 React-Native 中的容器组件

带有 React Native 的 EventEmitter 和 Subscriber ES6 语法

React Native：使用百分比时将视图的宽度设置为等于其高度