时间戳

首页 > 解决方案 > react-native 如何根据点击的手风琴从状态中收集不同的属性？

reactjs - react-native 如何根据点击的手风琴从状态中收集不同的属性？

问题描述

如何从我的菜单数组中收集“标题”和“副标题”并将其传递给 onSelect 函数以根据这些参数在全页屏幕中呈现该标题和副标题？我用不同的道具做了一个手风琴。我想从每个手风琴导航到 fullPage 屏幕，这将根据我点击的手风琴呈现不同的标题和副标题。任何想法？提前致谢

export default class AccidentScreen extends Component {
    constructor(props) {`super(props);
        this.state = {`menu: [
                {
                    title: 'title1', icon: 'fire', color: 
 Colors.customRed,
                    data: [
                        {id: '1', subtitle: 'subtitle1' , subIcon: 'fire', 
 status: 'inactive'},
                ]
            },
            {
                title: 'title2', icon: 'street-view', color: 
    Colors.customLightBlue,
                data: [
                    {id: '2', subtitle: 'subtitle2' , subIcon: 'google- 
 wallet', status: 'inactive' },
                ]
            },
            {
                    title: 'title3', icon: 'water', color: 
Colors.customBrown,
                    data: [
                        {id: '3', subtitle: 'subtitle3', subIcon: 'earth', 
status: 'inactive'},
                        {id: '4', subtitle: 'subtitle4', subIcon: 'earth', 
status: 'inactive'},
                ]
            },
            {
                    title: 'title4', icon: 'fire', color: 
Colors.customGrey,
                    data: [
                        {id: '5', subtitle: 'subtitle5', subIcon: 'wind', 
status: 'inactive' },
                        {id: '6', subtitle: 'subtitle6' , subIcon: 'wind', 
status: 'inactive'},
                ]
            },
            {
                    title: 'title5', icon: 'car-crash', color: 
Colors.customRed,
                    data: [
                        {id: '7', subtitle: 'subtitle7',subIcon: 'car', 
status: 'inactive'},
                    {id: '8', subtitle: 'subtitle8', subIcon: 'car', 
status: 
'inactive'},
                ]
            },
        ]`
        
    }
}

    render() {
        return (
            <View style={styles.container}>
                <ScrollView>
                    {this.renderAccordians()}
                    <UrgentCall/>
                </ScrollView>
           
            </View>
        );
    }

    renderAccordians = () => {
        const items = [];

        for (item of this.state.menu){
           items.push (
               <Accordian
                 subtitle={item.subtitle}
                 title={item.title}
                 data={item.data}
                  menu={item.icon}
                  color={item.color}
                  onSelect={() => {
                    this.props.navigation.navigate({routeName: 'FullPage', 
params: {accidentState: item} });
                }} />
             );
        }
        return items;`
    
    }
};

标签： reactjsreact-nativeparameters

解决方案

You have already helped me a lot. How could my 'Full Page Screen' know which subtitle in accordion I clicked on to pass that subtitle to 'Full Page' screen based on your first solution because the second one doesn't work.

My 'Full Page' screen component:

render() {

 const accident = this.props.navigation.getParam('accidentCat');

return (
<ScrollView>
   <View>
     <View>
       <Text>{accident.title}</Text>
       <Text>{accident.data[0].subtitle}</Text>
     </View>
   </View>
</ScrollView>

) }

推荐阅读