react-native 自定义倒计时按钮

Posted 2023-05-04

参考技术A 最近研究了一下倒计时，网上有不少第三方开源库，不过试了试，有的并不好用，写法也停留在ES5上，而我写的demo使用的是0.45版本的RN，改起来很是麻烦。于是就参考 react-native-CountDowntimer 实现了一下倒计时按钮，效果还不错~

我们将要使其样式、提示文字及显示方式可以自定义。那就要将文字样式，提示文字(包括显示的时间数字，时间单位等)都定义为组件属性，可以由调用者灵活定义。

首先用户输入一个结束时间，我们需要声明一个state，再写一个计时器，我们每隔1s就通过输入的结束时间和当前时间计算出时间差，再通过算法将时间差计算成xx天xx时xx分xx秒的格式，更改state的值，通过state的更改及判断计算结果，在render()方法中控制时间的显示及更新。

新建countDown.js

来说下我们要实现的效果，传入一个结束时间，开始倒计时，倒计时中，抢单按钮可以点击，当倒计时结束，按钮置灰且不可点击。

新建demo.js

好了，自定义的倒计时按钮就写好了~希望对你们有所帮助！！！

自定义字体不适用于 React-Native 0.62

【中文标题】自定义字体不适用于 React-Native 0.62

【英文标题】：Custom fonts not working on React-Native 0.62

【发布时间】：2020-03-30 07:16:38

【问题描述】：

我正在尝试在我的应用程序上使用自定义字体，但它不起作用。我已经按照其他类似问题的许多步骤进行操作，但没有任何效果。

我没有收到任何错误。

资产文件夹的路径： Assets source

这是我尝试过的：

使用以下代码在根项目上创建 react-native.config.js 文件：

module.exports = 
    project: 
      ios: ,
      android: ,
    ,
    assets: ['./src/assets/fonts']
  ;

正在运行 react-native 链接： 这没有给我任何错误：

info Linking assets to ios project
info Linking assets to android project
success Assets have been successfully linked to your project

在不使用任何 fontWeight 的情况下完全按照样式中的名称命名字体：

<Text style=[styles.texto_Titulo, fontFamily: "LatoBlack"]>
      ENTRADA
</Text>

在 react-native 链接后使用 npx react-native run-android 重新编译

为什么这不起作用？

【问题讨论】：

链接后您是否看到 Android/app/main 文件夹有任何变化？

@OliverD 不在 android/app/main 但在 android/src/ 我有一个包含字体的 assets/fonts 文件夹

是的，我正在尝试这种方式，它对我有用！检查您输入代码“fontFamily”时的字体文件名是否，字体是否有效，最后卸载应用程序并重建它

@OliverD 我不认为我完全理解你，你能解释一下吗？

你也可以查看link

【参考方案1】：

好的，这恰好是 React Native 0.62 的当前错误。此问题的解决方法是将 assets/fonts 文件夹复制到 /android/app/src/main/ 路径。这解决了问题。

【讨论】：

你能链接 GitHub 问题吗？

@AidanH 你是什么意思？我不知道 react-native github 上是否有任何关于此的问题，我只知道有更多人遇到完全相同的问题

@AdriánOrtellsCasado 我在新的React Native 0.62.2 中遇到了同样的问题，我将fonts 文件夹复制到/android/app/src/main 文件夹中，但图标仍然没有显示。我跟着这个reactnative.guide/12-svg-icons-using-react-native-vector-icons/… 添加我的自定义图标。我唯一没有做的就是链接。我需要链接react-native-vector-icons吗？他们在没有链接的情况下工作，这就是我没有链接的原因。

@Sam 这个问题只是字体的问题，我不知道图标是否也会发生，我使用 fontawesome 的没有问题

0.63.3也是这种情况

【参考方案2】：

我的解决方案是从我的文本样式中删除 fontWeight。如果提供了 fontWeight，似乎字体系列不起作用

【讨论】：

是的帮助了我:) 这应该更明显，谢谢！

【参考方案3】：

https://github.com/facebook/react-native/issues/25852#issuecomment-826526064

我在 0.64.0 上仍然面临同样的问题

解决方案

请将您的字体文件复制粘贴到

android/app/src/main/assets/fonts

如果您在主文件夹中没有找到资产文件夹。请创建它的资产/字体文件夹

然后做 react-native link

它现在可以工作了，无需添加任何配置

【参考方案4】：

如果您正在关注所有其他解决方案但仍然没有更新，请尝试以下步骤

添加 react-native-config.js 文件 然后在 assets/fonts/your font 中添加字体 将 OpenSans_Regular 等小写字母重命名为 opensans_regular 项目文件夹中终端中的 react-native 链接 毕竟使用 react-native run-android 再次构建您的项目

    fontFamily: Platform.OS === "ios" ? 'opensans_regular' : 'cassandrapersonaluseregular_3bjg',

我也遇到了同样的问题，字体没有反映更改，然后我再次构建我的项目，这是我的错误，因为我们在我们的 android 文件夹中添加了字体，所以我们需要再次编译它。 我希望有人可以节省他们的时间

【讨论】：

只是为了更正您的文件名应该是 react-native.config.js 而不是 react-native-config.js 如第一点所述。