如何在一個組件-React Native中顯示一個或多個詳細信息？

Question

我有主要的“類別”標簽，我想當我單擊其中的任何一個標簽時，它只會顯示他的詳細信息，

因此，我取消了每個類別的標記並在單擊以顯示類別詳細信息時對其進行更新， 但是我認為這是一個錯誤的主意！ 和其他問題，當我單擊第一個類別時，會顯示他的詳細信息，但是當我從選項卡中單擊其他類別時，第一個類別仍然存在！ 那么我該如何處理這些問題？

零食在這里

這是我的密碼

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 ”模塊即可對其進行處理。

您可以使用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',
    },
  },
});