кнопка отмены строки текста, только если она нажата

ProgramBox

кнопка отмены строки текста, только если она нажата

Post author:admin
Запись опубликована:26 марта, 2023
Post category:Вопросы по программированию

#react-native

Вопрос:

Я настраиваю новый компонент и хочу подчеркнуть текстовую кнопку, только если она нажата, и когда я нажал другую кнопку, подчеркивание исчезнет, и новая кнопка будет подчеркнута…

Это для нового компонента

 <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>

Я пытаюсь создать ситуацию, когда только при нажатии одной из кнопок она будет подчеркнута, а если я нажму другую кнопку, то будет подчеркнута только она, а остальные не будут и так далее…

Ответ №1:

Вы можете сделать это с помощью state . Вот пример кода для двух кнопок, вы могли бы отразить для остальных таким же образом.

Во-первых, в вашем основном классе добавьте конструктор и объявите состояния внутри,

 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 для получения эффекта используется prop. Обратитесь к этой ссылке, чтобы получить больше информации 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"
    }
  }
);

1. Как я могу сделать это с помощью навигатора вкладок, а не кнопок?

2. навигатор вкладок в смысле react-navigation tab navigator или простой компонент, имитирующий навигатор вкладок?

3. навигатор вкладок в смысле react-navigation tab navigator .

4. Мне нужны вкладки в верхней части экрана, а не внизу

5. Приведенный выше код будет работать для того же. В приведенном выше коде я установил для tabBarPosition реквизита значение top

Ответ №2:

Вам нужно использовать STATE и изменять 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>
    );
}
}