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

Question

我是反应原生的新手。现在我在我的学校作业中使用反应原生。在使用 react-native 之前，我使用了 ionic。

我正在尝试过滤数据。数据采用 JSON 格式。反应原生有像离子这样的过滤器吗？

参考： 角度滤波器

Answer 1

No.

离子指令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>
    );
}

更进一步，您可以创建一个具有 filter 属性的组件，并实现自定义逻辑。 然后你可以像 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 和调整逻辑一起使用来适应它。
• 最好使用 ListView 来显示可迭代数据。