JSON 中的 react-native 过滤器和搜索数据答案

【问题标题】：react-native filter and search data in JSONJSON 中的 react-native 过滤器和搜索数据
【发布时间】：2017-06-24 05:45:08
【问题描述】：

我是 react-native 的新手。现在我正在为我的学校作业使用 react-native。在使用 react-native 之前，我使用了 ionic。

我正在尝试过滤数据。数据采用 JSON 格式。 react-native 有像 ionic 这样的过滤器吗？

参考：Angular Filter

【问题讨论】：

你试过了吗？
是的，我用谷歌搜索过。但我需要插件或其他东西。所以我可以动态过滤并使用另一个功能。

标签： javascript angularjs react-native filtering

【解决方案1】：

没有。

Ionic 指令filter 也在for loop 之前执行过滤逻辑。所以你可以在渲染之前自己做。

使用 ES6 过滤功能或其他工具。

例如显示奇数

render() {
    return(
        <View>
            {[1, 2, 3, 4, 5]
                .filter(value => value % 2 === 1)
                .map(value => (<Text key={value}>{value}</Text>))}
        </View>
    );
}

更进一步，您可以创建一个具有过滤器属性的组件，并实现自定义逻辑。那么你可以像 Ionic 一样使用它。

例如

class FilterNumbers extends Component {

static propTypes = {
    numbers: PropTypes.array.isRequired,
    filter: PropTypes.func,
};

static defaultProps = {
    filter: null,
    numbers: [],
};

render() {
    var filteredNumbers = this.props.numbers;
    if (this.props.filter) {
        filteredNumbers = this.props.numbers.filter(this.props.filter);
    }

    return (
        <View>
            {filteredNumbers.map(value => (<Text key={value}>{value}</Text>))}
        </View>);
};

}

使用它

<FilterNumbers numbers={[1, 2, 3, 4, 5]} filter={value => value % 2 === 1}/>

附言

我使用带有数字的数组进行简单演示。您可以使用带有 JSON 和调整逻辑的 Array 来适应它。
最好使用ListView显示可迭代数据。

【讨论】：