React Native Text 样式示例 - Javascript

在 React Native 中，Text 组件用于显示文本内容，我们可以通过添加样式来美化文本的展示效果。本文将介绍如何使用 React Native 中的 Text 样式，包括文本的颜色、字体、大小、对齐方式等。

文本颜色

我们可以使用 color 属性来设置文字颜色，例如：

<Text style={{ color: 'red' }}>红色文本</Text>

字体

我们可以使用 fontFamily 属性来设置文本字体，例如：

<Text style={{ fontFamily: 'Helvetica' }}>使用 Helvetica 字体的文本</Text>

如果要使用自定义字体，需要在项目中先引入并注册字体。例如：

import { StyleSheet, Text, View } from 'react-native';
import * as Font from 'expo-font';

const loadFonts = async () => {
  await Font.loadAsync({
    'custom-font': require('./assets/fonts/CustomFont.ttf'),
  });
};

const App = () => {
  useEffect(() => {
    loadFonts();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={{ fontFamily: 'custom-font' }}>自定义字体文本</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

字体大小

我们可以使用 fontSize 属性来设置文本字体大小，例如：

<Text style={{ fontSize: 24 }}>24号字体</Text>

对齐方式

我们可以使用 textAlign 属性来设置文本的对齐方式，例如：

<Text style={{ textAlign: 'center' }}>居中对齐文本</Text>

行高

我们可以使用 lineHeight 属性来设置文本行高，例如：

<Text style={{ lineHeight: 40 }}>40px 行高的文本</Text>

加粗和斜体

我们可以使用 fontWeight 属性来设置文本加粗，例如：

<Text style={{ fontWeight: 'bold' }}>加粗文本</Text>

使用 fontStyle 属性可以设置文本为斜体，例如：

<Text style={{ fontStyle: 'italic' }}>斜体文本</Text>

字符间距

我们可以使用 letterSpacing 属性来设置文本字符间距，例如：

<Text style={{ letterSpacing: 2 }}>2px 字符间距的文本</Text>

这些是 React Native 中 Text 样式的基本用法。当然还有其他更高级的用法，如使用自定义组件、使用图标等。开发者可以参考官方文档，探索更多精彩的开发技巧！