代码之家 › 专栏 › 技术社区 › Guilherme Garcia da Rosa

如何在react native中呈现多个视图?

react-native

Guilherme Garcia da Rosa · 技术社区 · 6 年前

我已经设法建立了一个选择屏幕使用自动完成,基本上我想做的是有一个项目要选择,这个项目的金额要更新到所需的金额,如果你想添加更多的项目到列表中有一个按钮,以创建一个新的领域(自动完成+所需金额),代码如下(但它不会工作,我在展示我认为应该如何管理)

render() {
    const { query } = this.state;
    const itemData = this.state.items;
    let mapArray = this.state.amount.slice();
    return (
        <View>
            <View style={styles.autocompleteContainer}>
                {
                    mapArray.map((l, i) => (
                        <View style={{ width: '100%', flexDirection: "row", alignItems: 'center' }} key={i}>
                            <Autocomplete style={styles.barStyle} data={this.state.query.length > 0 ? (this.state.itemPress ? [] : this.filterData(this.state.query, itemData)) : []}
                                defaultValue={query}
                                placeholder="Digite um item"
                                onChangeText={text => this.setState({ query: text, itemPress: false })}
                                renderItem={item => (
                                    <TouchableOpacity onPress={() => this.setState({ query: item, itemPress: true })}>
                                        <Text>{item}</Text>
                                    </TouchableOpacity>
                                )} key={i}/>
                            <View>
                                <View style={styles.amount}>
                                    <TouchableOpacity style={{ marginLeft: 10 }} onPress={() => {
                                        var clonedAmountArray = this.state.amount.slice();
                                        clonedAmountArray[i] -= 1;
                                        this.setState({ amount: clonedAmountArray })
                                    }}>
                                        <View>
                                            <Icon style={{ alignSelf: 'center' }} name="ios-remove" />
                                        </View>
                                    </TouchableOpacity>
                                    <Text style={{ fontSize: 20, alignSelf: 'center', marginLeft: 5 }}>{this.state.amount[i]}</Text>
                                    <TouchableOpacity style={{ marginLeft: 5, marginRight: 10 }} onPress={() => {
                                        let clonedAmountArray = this.state.amount.slice();
                                        clonedAmountArray[i] += 1;
                                        this.setState({ amount: clonedAmountArray })
                                    }}>
                                        <View>
                                            <Icon style={{ alignSelf: 'center' }} name="ios-add" />
                                        </View>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    ))}
                <TouchableOpacity onPress={() => {
                    var updatedAmountArray = this.state.amount.slice();
                    updatedAmountArray.push(0);
                    this.setState({ amount: updatedAmountArray, totalViews: this.state.totalViews + 1 })
                }} style={{ backgroundColor: 'grey', width: 30, height: 30, borderRadius: 5, alignSelf: 'center' }}>
                    <View>
                        <Icon style={{ alignSelf: 'center' }} name="ios-add" />
                    </View>
                </TouchableOpacity>
            </View>
        </View>
    )
}

下面是它的样子:

我想要的是根据按下“+”底部按钮的次数呈现多个字段(autocomplete+amount picker),我还需要保留所有项目和金额的记录。

我可能在很多方面做错了,我仍然在学习,做很多错事。如果你有什么建议,我会很感激。

感谢@Mohammed Ashfaq,它可以处理新字段,但在所有视图中保持相同的Autocomplete值:

1 回复 | 直到 6 年前

Mohammed Ashfaq 6 年前

OnPress函数Add1用于生成更多字段(自动完成+金额选择)。

onPress={() => {
  let clonedAmountArray = this.state.amount.slice();
  clonedAmountArray.push(0);
  this.setState({ amount:clonedAmountArray , totalViews: clonedAmountArray.length}) 
}

OnPress函数以增加特定索引的值。

onPress={() => {
  let clonedAmountArray = this.state.amount.slice();
  clonedAmountArray[i] += 1; 
  this.setState({ amount : clonedAmountArray}) 
}

onPress={() => {
  var clonedAmountArray = this.state.amount.slice();
  clonedAmountArray[i] -= 1; 
  this.setState({ amount : clonedAmountArray}) 
}