在點擊的文本元素下划線

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