подчеркните выбранный текстовый элемент

#javascript #css #reactjs #typescript #react-native

Вопрос:

У меня есть список текстовых элементов, которые я хочу подчеркнуть при нажатии. Если я добавлю текстовое оформление tabText , то, очевидно, оно будет применено ко всем элементам. Как я могу убедиться, что при нажатии на другую вкладку подчеркивание с предыдущей вкладки удаляется?

Есть ли какой-либо способ, которым я могу добавлять или удалять элементы из элемента стиля при нажатии на элемент?

 //onPress={() => {}}>
const tabs = [
  {
    id: 1,
    text: 'Alle List',
  },
  {
    id: 2,
    text: 'Second',
  },
];
export const Tab: React.FunctionComponent = () => {
  return (
    <View style={styles.tabView}>
      {tabs.map((item: any) => (
        <View>
          <Text style={styles.tabText}>{item.text}</Text>
        </View>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  tabView: {
    paddingTop: moderateScale(15),
    paddingLeft: moderateScale(20),
    paddingRight: moderateScale(20),
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  tabText: {
    color: 'white',
    paddingBottom: moderateScale(10),
    //textDecorationLine: 'underline'
  },
});

Codesandbox (с элементами tabText также в виде массива):

https://snack.expo.io/@nhammad/shallow-watermelon

Ответ №1:

Вы можете использовать useState для сохранения выбранного индекса, а затем применить другой стиль на основе выбранного индекса. Вот быстрая модификация вашего скрипта, и ссылка на закуску находится в конце.

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

const tabs = [
  {
    id: 1,
    text: 'All Friends',
  },
  {
    id: 2,
    text: 'Second',
  },
  {
    id: 3,
    text: 'Third',
  },
];
export default function App() {
  const [selected, setSelected] = React.useState(null)
  return (
    <View style={styles.container}>
      <View style={styles.tabView}>
        {tabs.map((item: any, index) => (
          <TouchableOpacity onPress={()=>setSelected(index)}>
          <View>
            <Text style={[styles.tabText,selected===index?styles.selected:null]}>{item.text}</Text>
          </View>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  tabView: {
    paddingTop: 15,
    paddingLeft: 20,
    paddingRight: 20,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  tabText: {
    color: 'black',
    paddingBottom: 10,
  },
  selected: {
    textDecorationLine: 'underline'
  },
});

https://snack.expo.io/@saachitech/da6280

1. Можно ли также стилизовать подчеркивание? Например, я добавил к нему цвет, но я хочу увеличить его высоту или, возможно, увеличить расстояние между подчеркиванием и текстом. textDecorationColor: 'green ,

2. возможно, используйте textUnderlinePosition: 'under' , вот дополнительная информация css-tricks.com/almanac/properties/t/text-underline-position

3. Обновлен Snack со стилями border-bottom

Ответ №2:

Вы можете добавлять разные стили для своей вкладки в зависимости от активного маршрута

 <Text style={[(this.props.activeRouteName == route.routeName) ? styles.tabActiveText: styles.tabText]}>{item.text}</Text>    

And then in the styles

tabActiveText: {
    color: 'white',
    paddingBottom: moderateScale(10),
    textDecorationLine: 'underline'
}