下划线单击的文本元素

Question

我有一个文本元素列表，我想在单击时添加下划线。如果我将文本装饰添加到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

Answer 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

Answer 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'
}