Question

我想切换多个数据。我尝试过但没有成功。

render() {
    return(
     <ScrollView style={styles.drawer}>
       <View style={styles.content} key={1}>
          <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(data) =>
                        <View>
                            <Text style={styles.navMenuTop} onPress={this.handlePressTopCat.bind(this)}> 
                                {'› '+data.Name}
                            </Text>

                             {data.SubItems.map((b,Index) =>
                              <View style={{height:this.state.SubHeight}}>
                                   <Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,b.cPath)}> {'» '+b.Name}</Text>


                               </View> 
                                )}
                        </View>
                        }
           />

        </View>
      </ScrollView>
    );
  }
}

我如何切换多个div。单击navMenuTop时，可以切换子项。它应该像菜单一样工作。

Answer 1

            import React, { Component } from 'react';
            import { Container, Header, Content, Card, CardItem, Body, Text,Button } from 'native-base';
            import _isEqual from 'lodash/isEqual';
            import _map from 'lodash/map';
            export default class CardExample extends Component {
              constructor(props) {
                super();
                this.state = {
                  previousState: '',
                  cardData: [1,2,3,4,5],
                };
              }
               componentWillUpdate(nextProps, nextState) {
                if (!_isEqual(this.state.previousState, nextState.previousState)) {
                  this.setState({ [this.state.previousState]: false});
                }

              }

              open(key){
                this.setState({ [key]: !this.state[key],previousState:key});
              }
              render() {
                return (
                  <Container>
                    <Header />
                    <Content>
                      {
                       _map(this.state.cardData,(data,key)=>{
                        return (
                          <Card>
                            <CardItem header>
                              <Text>Card {key} header</Text>
                            </CardItem>
                            {
                              this.state[`open_${key}`] ? 
                                <CardItem>
                                  <Body>
                                    <Text>
                                      This is cardItem {key} Body element
                                    </Text>
                                  </Body>
                                </CardItem>

                              : null
                            }
                            <CardItem footer>
                              <Button onPress={()=>this.open(`open_${key}`)}><Text>open {key}</Text></Button>
                            </CardItem>
                         </Card>
                          )
                       })
                      }
                    </Content>
                  </Container>
                );
              }
            }

我如何切换多个<view>数据反应原生

1 个答案: