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”模块即可处理。

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

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

1 个答案: