Question

我是反应原生的新手。现在我正在使用反应本地的学校作业。在使用反应原生物之前，我使用了离子。

我正在尝试过滤数据。数据采用JSON格式。反应原生的反应器是否具有离子过滤器？

Answer 1

没有

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

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

e.g。显示奇数

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

更进一步，您可以使用filter属性创建组件，并实现自定义逻辑。然后你可以像离子一样使用它。

e.g。

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}/>

P.S。

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

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

1 个答案: