Question

我是新人，我需要你的帮助

我想给水平平面列表的边框底部按下项目和上一个项目的边框底部消失，现在我可以给新的按下项目边框，但我不能删除以前的项目边框我怎么能做到这一点？ enter image description here

这些是我的Category_style代码

state = {
        isModalVisible: false,
        Index : 0
    }

_toggleModal = (index) => {
    this.setState({isModalVisible: !this.state.isModalVisible});
    this.setState({Index : index});
}

renderProduct(item) {
    return <Sub_Categories_FlatList_style name={item.title} icon={item.icon}/>
}

renderSeparator = () => (
    <View
        style={{
            backgroundColor: '#d2d2d2',
            height: 0.5,
        }}
    />
)

render() {
    const {title, index} = this.props;
    return (
<View style={pStyles.container}>
            <TouchableHighlight onPress={() => this._toggleModal(index)}
                              style={(index === this.state.Index) ? pStyles.border_bottom : pStyles.no_border_bottom}>
                <Text style={pStyles.title}>{title}</Text>
            </TouchableHighlight>
            <Modal isVisible={this.state.isModalVisible} animationType={'slide'}>
                <TouchableOpacity onPress={() => this._toggleModal(index)} style={pStyles.T_opacity}
                                  activeOpacity={.7}>
                    <Image source={require('./../pictures/x_icon.png')}
                           style={pStyles.close_image}/>
                </TouchableOpacity>
                <View style={pStyles.in_modal_view}>
                    <Text style={pStyles.modal_header_text}>{title}</Text>
                    <FlatList
                        data={this.props.subCategory}
                        renderItem={({item}) => this.renderProduct(item)}
                        ItemSeparatorComponent={this.renderSeparator}
                        keyExtractor={(item, index) => index}/>
                </View>
            </Modal>
        </View>

这些是我的类别代码

static navigationOptions = {
    headerStyle: {
        backgroundColor: '#4caf50'
    },
    headerTitle: <Text style={Category_in_style.headerTitleStyle}>Category</Text>
}

renderCategory(item, index) {
    return <Category_style title={item.title} index={index} subCategory={item.sub_category}/>

}

renderProduct(item) {
    return <Product_style image={item.imageUrl} title={item.title} price={item.price}/>
}

render() {
        return (
            <View style={{backgroundColor: 'white'}}>
                <FlatList style={styles.first_flat}
                          horizontal
                          data={this.state.main_categories}
                          renderItem={({item, index})=> this.renderCategory(item, index)}
                          keyExtractor={(item, index) => index}/>
                <PTRView style={{backgroundColor: '#f1f1f1'}}>
                    <FlatList style={[{marginTop: 10}, {marginBottom: 50}]}
                              data={this.state.articles}
                              renderItem={({item}) => this.renderProduct(item)}
                              keyExtractor={(item, index) => index}
                              numColumns={2}/>
                </PTRView>
            </View>

Answer 1

可能有多种方法可以做到这一点，但我更喜欢让父母决定点击哪个组件。

所以我建议在你的renderProduct中，item对象也有一个索引，你可以将它传递给你的Sub_Categories_FlatList_style，并且还可以向它传递一个函数，它基本上会在点击项目时更新变量。

然后，当您呈现列表项时，只需检查它的索引是否与当前选定的索引匹配，然后相应地设置样式。

对不起，如果这看起来有点模糊，但是我在工作之余就开始注意这一点，但我很乐意回答任何后续行动。

边框底部改变按压平面列表项目反应原生

1 个答案: