React Nativeでテキストの下に線を追加する方法

1. スタイルシートを使用する方法:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
  textContainer: {
    borderBottomWidth: 1,
    borderBottomColor: 'black',
  },
  text: {
    fontSize: 16,
    fontWeight: 'bold',
  },
});
const App = () => {
  return (
    <View>
      <Text style={styles.textContainer}>
        <Text style={styles.text}>テキスト</Text>
      </Text>
    </View>
  );
};
export default App;

2. View コンポーネントと borderBottomWidth スタイルを使用する方法:

import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
  return (
    <View>
      <Text>テキスト</Text>
      <View
        style={{
          borderBottomWidth: 1,
          borderBottomColor: 'black',
        }}
      />
    </View>
  );
};
export default App;

3. Text コンポーネントをカスタマイズする方法:

import React from 'react';
import { Text } from 'react-native';
const UnderlinedText = ({ children }) => {
  return (
    <Text>
      {children}
      <Text
        style={{
          textDecorationLine: 'underline',
          textDecorationColor: 'black',
          textDecorationStyle: 'solid',
        }}
      >
        {' '}
      </Text>
    </Text>
  );
};
const App = () => {
  return <UnderlinedText>テキスト</UnderlinedText>;
};
export default App;

これらの方法を使用して、React Nativeでテキストの下に線を追加することができます。選択した方法に基づいて、コードをカスタマイズしてください。