Question

我正在设置一个新组件，并且只在按下文本按钮时才想在其上加上下划线，所以当我按下另一个按钮时，下划线将消失并且新按钮将带有下划线...

这是一个新组件

<View style={Style.tabsContainer}>
    <TouchableOpacity onPress={() => {}}>
        <Text style={{
            color: 'white',
            textDecorationLine: 'underline',
            fontSize: 16,
            margin: 2,
            padding: 2
        }}>Products</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => {}}>
        <Text style={{
            color: 'white',
            textDecorationLine: 'underline',
            fontSize: 16,
            margin: 2,
            padding: 2
        }}>Categories</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => {}}>
        <Text style={{
            color: 'white',
            textDecorationLine: 'underline',
            fontSize: 16,
            margin: 2,
            padding: 2
        }}>Warehouse</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => {}}>
        <Text style={{
            color: 'white',
            textDecorationLine: 'underline',
            fontSize: 16,
            margin: 2,
            padding: 2
        }}>Upcs</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => {}}>
        <Text style={{
            color: 'white',
            textDecorationLine: 'underline',
            fontSize: 16,
            margin: 2,
            padding: 2
        }}>Tags</Text>
    </TouchableOpacity>
</View>

我正在尝试一种情况，只有当我按下其中一个按钮时，它才会带有下划线；如果我按下另一个按钮，则仅它会带有下划线，其余的等等……

Answer 1

您可以使用state进行此操作。这是两个按钮的示例代码，您可以用相同的方式反映其余部分。

首先，在您的Main类中，添加一个构造函数并在其中声明状态，

constructor(props) {
super(props);
this.state = {
  button1: null,
  button2: null
  };
}

最后，特定组件的onPress设置适当的状态，并将状态值分配给textDecorationLine道具。

  <View style={Style.tabsContainer}>
          <TouchableOpacity onPress={() => {
               this.setState({button1:"underline",button2:null});
           }}>
            <Text style={{ color: 'white', textDecorationLine: this.state.button1, fontSize: 16, margin: 2, padding: 2 }}>Products</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => {
            this.setState({button1:null,button2:"underline"});
          }}>
            <Text style={{ color: 'white', textDecorationLine: this.state.button2, fontSize: 16, margin: 2, padding: 2 }}>Categories</Text>
          </TouchableOpacity>
     </View>

我希望我能帮上忙。请发表评论以寻求进一步的指导。

更新（关于您在评论中的查询）：

createTabNavigator具有2个参数RouteConfigs and BottomTabNavigatorConfig;

在添加RouteConfigs并使用以下代码更改BottomTabNavigatorConfig之后，您将获得清晰的认识。

tabBarOptions道具用于获得效果。请参考此链接以获取更多见解BottomTabNavigatorConfig

export default createTabNavigator(
  {
    Page1: {
      screen: Page1,
      navigationOptions: {
        tabBarLabel: "Page1"
      }
    },
    Page2: {
      screen: Page2,
      navigationOptions: {
        tabBarLabel: "Page2"
      }
    },
    Page3: {
      screen: Page3,
      navigationOptions: {
        tabBarLabel: "Page3"
      }
    },
  },
  {
     //BottomTabNavigatorConfig here
    animationEnabled: true,
    tabBarPosition: "top",
    lazy: true,
    tabBarOptions: {
      scrollEnabled: true,
      upperCaseLabel: false,
      indicatorStyle: {
        backgroundColor: "#39b4ea",
        borderWidth: 0.1
        //#286ec0
      },

      labelStyle: {
        fontSize: 15,
        textAlign: "center",
        justifyContent: "center",
        fontFamily: "Inter-Regular"
      },
      style: {
        backgroundColor: "white",
        shadowOffset: { width: 0, height: 1 },
        shadowColor: "black",
        shadowOpacity: 0.1,
        elevation: 2
      },
      activeTintColor: "#39b4ea",
      inactiveTintColor: "#7c7c7c"
    }
  }
);

Answer 2

您需要使用STATE并根据需要更改状态。希望能对您有所帮助：

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

export default class MyComponent extends React.Component(){

constructor (props){
    super(props);
    this.state = {
        decorationProducts: 'none',
        decorationCategories: 'none',
        decorationWarehouse: 'none',
        decorationUpcs: 'none',
        decorationTags: 'none',
    };
    this._setDecorations = this._setDecorations.bind(this);
}

_setDecorations(d1, d2, d3, d4, d5){
    this.setState({
        decorationProducts: d1,
        decorationCategories: d2,
        decorationWarehouse: d3,
        decorationUpcs: d4,
        decorationTags: d5,
    });
}

render(){
    return(
        <View style={Style.tabsContainer}>
            <TouchableOpacity onPress={() => {this._setDecorations('underline','none','none', 'none', 'none')}}>
                <Text style={{ color: 'white', textDecorationLine: this.state.decorationProducts, fontSize: 16, margin: 2, padding: 2 }}>Products</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {this._setDecorations('none','underline','none', 'none', 'none')}}>
                <Text style={{ color: 'white', textDecorationLine: this.state.decorationCategories, fontSize: 16, margin: 2, padding: 2 }}>Categories</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {this._setDecorations('none','none','underline', 'none', 'none')}}>
                <Text style={{ color: 'white', textDecorationLine: this.state.decorationWarehouse, fontSize: 16, margin: 2, padding: 2 }}>Warehouse</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {this._setDecorations('none','none','none', 'underline', 'none')}}>
                <Text style={{ color: 'white', textDecorationLine: this.state.decorationUpcs, fontSize: 16, margin: 2, padding: 2 }}>Upcs</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {this._setDecorations('none','none','none', 'none', 'underline')}}>
                <Text style={{ color: 'white', textDecorationLine: this.state.decorationTags, fontSize: 16, margin: 2, padding: 2 }}>Tags</Text>
            </TouchableOpacity>
        </View>
    );
}
}

仅在按下时取消对文本按钮的轮廓

2 个答案: