重现原生弦/ 底线文本
允许您在移动应用程序中添加带有中风效果的时髦文本 。 它很适合创建视觉 具有大纲效果的吸引力文本要素.
安装
npm install @charmy.tech/react-native-stroke-text
# or
yarn add @charmy.tech/react-native-stroke-text
机器人
分钟 compileSdkVersion 必须是 34
iOS系统
转到您的 ios 文件夹并运行 :
pod install
使用量
下面是一个简单的例子,可以让你开始使用 StrokeText:
import React from "react";
import { StrokeText } from "@charmy.tech/react-native-stroke-text";
import { View } from "react-native";
export default function Screen() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<StrokeText
text="Test"
fontSize={50}
color="#000000"
strokeColor="#c334eb"
strokeWidth={20}
fontFamily="Nunito-Black"
/>
</View>
);
}
道具
下表列出可供下列人员使用的道具: StrokeText 组件 :
| Prop | 类型 | 说明 |
|---|---|---|
text | 字符串 | 您要显示的文本内容 . |
fontSize | 编号 | 文本字体的大小, 定义文本的大小 . |
color | 字符串 | 文本的颜色,可以使用任何有效的颜色格式. |
strokeColor | 字符串 | 文字周围的中风颜色(外线). |
strokeWidth | 编号 | 中风的宽度,决定了轮廓的厚度. |
fontFamily | 字符串 | 文本的字体家族,应当匹配可用的工程字体. |
align | 字符串 | 文本对齐( 默认 ): center(中文(简体) ) |
numberOfLines | 编号 | 行数( 默认 ): 0(中文(简体) ) |
ellipsis | 布尔 | 椭圆(.)(默认: false(中文(简体) ) |
width | 编号 | 启用椭圆的文本宽度( 默认值 : undefined(中文(简体) ) |
椭圆
<StrokeText
text="Lorem ipsum"
width={150} // +
ellipsis={true} // +
numberOfLines={1} // +
fontSize={32}
color="#FFFFFF"
strokeColor="#000000"
strokeWidth={2}
fontFamily="Nunito-Black"
align="center"
/>
自定义字体
裸体反应原生
创建一个 react-native.config.js 根目录中的文件
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['/assets/fonts'], // or './src/assets/fonts'
};
博览会( E)expo-font 数据(中文(简体) )
import { useFonts } from "expo-font";
import { Dosis_400Regular } from "@expo-google-fonts/dosis";
const [fontsLoaded, fontError] = useFonts({
Danfo: require("./src/assets/fonts/Danfo-Regular.ttf"),
"Dosis-Regular": Dosis_400Regular,
});
捐款
我们欢迎为改善这一构成部分而作的贡献。 请随意提出问题和改进请求.
许可证
请参看该项目的使用权和限制许可证.