javascript - 如何在一个组件中显示一个或多个详细信息 - 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',
    },
  },
});