如何在一个组件中显示一个或多个细节 - React Native？

Question

我有主标签“类别”，我希望当我点击其中任何一个时，它只会出现他的详细信息，

所以我要为每个类别清除一个标志并在单击以显示类别详细信息时更新它，但是我认为这是一个错误的想法！和其他问题，当我单击第一个类别时，它会显示他的详细信息，但是当我从选项卡中单击其他类别时，第一个类别仍然存在！ 那么我该如何处理这些问题呢？

Snack Here

这是我的代码

import React, { Component } from 'react';
import { Text, View, ScrollView,TouchableOpacity } from 'react-native';

export default class App extends Component {
  state = {
    open:true,
    cat2:false,
    cat3:false,
    cat4:false,
  }
  render() {
    return (
      <View style={{flex: 1}} >
                <ScrollView style={{flexGrow: 0.05, backgroundColor: '#347ed8', paddingTop: 50}} horizontal>
                    <TouchableOpacity onPress={()=>this.setState({open:!this.state.open})} style={{width: 100}}><Text style={{color:"#fff",fontSize:18}}>cat1 </Text></TouchableOpacity>
                    <TouchableOpacity 
                    onPress={()=>this.setState({
                      cat2:!this.state.cat2
                      })} 

                    style={{width: 100}}><Text style={{color:"#fff",fontSize:18}}>Cat2</Text></TouchableOpacity>
                    <TouchableOpacity style={{width: 100}}><Text style={{color:"#fff",fontSize:18}}>Cat3</Text></TouchableOpacity>
                    <TouchableOpacity style={{width: 100}}><Text style={{color:"#fff",fontSize:18}}>Cat4</Text></TouchableOpacity>
                    <TouchableOpacity style={{width: 100}}><Text style={{color:"#fff",fontSize:18}}>Cat5</Text></TouchableOpacity>



                </ScrollView>
                <View style={{flex: 0.95, backgroundColor: '#ddd'}}>

                {this.state.open && <View>
                  <Text>Category Details  One Here</Text>
                </View>}

                 {this.state.cat2 && <View>
                  <Text>Category Details Two Here!</Text>
                </View>}
                 {this.state.cat3 && <View>
                  <Text>Category Details Three Here!</Text>
                </View>}
                 {this.state.cat4 && <View>
                  <Text>Category Details four Here!</Text>
                </View>}


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

Answer 1

一个简单的解决方案是使用React-navigation 模块。

这个问题应该是你没有在别处设置触摸事件，设置触摸事件的条件显示的值不一样。但是，这种情况可能会弄乱您的代码，只需使用“React-navigation”模块即可处理。

你可以use createMaterialTopTabNavigator

示例

import {
  createStackNavigator,
  createMaterialTopTabNavigator,//React navigation version 4 and before
  createAppContainer,
} from 'react-navigation';

import { createMaterialTopTabNavigator } from 'react-navigation-tabs';  //React navigation version 4 

//import Navigator in our project

import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
//Making TabNavigator which will be called in App StackNavigator
//we can directly export the TabNavigator also but header will not be visible
//as header comes only when we put anything into StackNavigator and then export
const TabScreen = createMaterialTopTabNavigator(
  {
    Home: { screen: FirstPage },
    Settings: { screen: SecondPage },
  },
  {
    tabBarPosition: 'top',
    swipeEnabled: true,
    animationEnabled: true,
    tabBarOptions: {
      activeTintColor: '#FFFFFF',
      inactiveTintColor: '#F8F8F8',
      style: {
        backgroundColor: '#633689',
      },
      labelStyle: {
        textAlign: 'center',
      },
      indicatorStyle: {
        borderBottomColor: '#87B56A',
        borderBottomWidth: 2,
      },
    },
  }
);

//making a StackNavigator to export as default
const App = createStackNavigator({
  TabScreen: {
    screen: TabScreen,
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#633689',
      },
      headerTintColor: '#FFFFFF',
      title: 'TabExample',
    },
  },
});