react-native-lahk-marquee-label - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

index.js

@@ -6,3 +6,3 @@ import React, { Component } from 'react';
   state = {
-    started: false
+    started: false // use state for this variable to make sure that any change would affect UI
   };
@@ -15,4 +15,9 @@
     this.duration = 0;
+    this.shouldFinish = false;
   }
 
+  componentWillUnmount() {
+    this.shouldFinish = true;
+  }
+
   textOnLayout(e) {
@@ -22,3 +27,3 @@ this.textWidth = e.nativeEvent.layout.width;
     if (this.bgViewWidth !== 0) {
-      this.animate();
+      this.prepareToAnimate();
     }
@@ -30,2 +35,8 @@ }
 
+    if (this.textWidth !== 0) {
+      this.prepareToAnimate();
+    }
+  }
+
+  prepareToAnimate() {
     // Calculate this.duration by this.props.duration / this.props.speed
@@ -40,5 +51,3 @@ // If this.props.duration is set, discard this.props.speed
 
-    if (this.textWidth !== 0) {
-      this.animate();
-    }
+    this.animate();
   }
@@ -48,3 +57,3 @@
     this.animatedTransformX.setValue(this.bgViewWidth);
-    if (!this.started) {
+    if (!this.state.started) {
       this.setState({
@@ -59,3 +68,7 @@ started: true
         easing: Easing.linear
-    }).start(() => this.animate());
+    }).start(() => {
+      if (!this.shouldFinish) {
+        this.animate()
+      }
+    });
   }
@@ -62,0 +75,0 @@

package.json

 {
   "name": "react-native-lahk-marquee-label",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A react-native marquee label component.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # react-native-lahk-marquee-label
 > A react-native marquee label component.
 
+[![npm version](https://badge.fury.io/js/react-native-lahk-marquee-label.svg)](https://badge.fury.io/js/react-native-lahk-marquee-label)
+
+## Anchors
+
+1. [Desc](#desc)
+2. [Install](#install)
+3. [Usage](#usage)
+4. [Props](#props)
+5. [中文介绍](#中文介绍)
+
 ## Desc
@@ -24,4 +34,4 @@
 
-- In Andorid, you can use both `style.width` or `flex` to layout the view.
-- In iOS, use `style.width` to layout the view. `flex` layout is not supported.
+- In Andorid, you can use both `width` or `flex` to layout the view.
+- In iOS, use `width` to layout the view. `flex` layout is not supported.
 
@@ -31,4 +41,17 @@
 
+```sh
+npm install --save react-native-lahk-marquee-label
+```
+
 ## Usage
+
+1. Import
+
 ```js
+import MarqueeLabel from 'react-native-lahk-marquee-label';
+```
+
+2. Use
+
+```js
 <MarqueeLabel
@@ -63,1 +86,26 @@ duration={8000}
 - `textContainerStyle`: stylesheet object, not recommended to use, text containner component custom style.
+
+## 中文介绍
+
+[跳转到 **#install**](#install)
+
+我在一个项目中需要用到跑马灯，但是在网上没找到好用的。所以我就自己写了一个跑马灯的组件。
+
+本来打算让它可以在 iOS 和 Android 平台上都好用的，不过还是在 iOS 平台上存在一个问题没法解决。
+
+我发现在 iOS 平台上，当使用 `View` 组件来包裹子组件的时候，如果没有显示设置父级 `View` 组件的宽度（width 样式）（比如用 `flex` 布局），那么父级 `View` 组件的宽度会被自动设置成子组件的宽度。（至少当子组件比父组件宽度大时是这样的，另外一种情况我没有做试验。）
+
+我的跑马灯组件中的问题在于，我用了一个子级 `View` 组件来包裹 `Text` 组件以保证文字是在一行全部显示。**通过将 text container 的宽度设置得比 `Text` 组件宽度大，保证了文字不会换行，也不会用省略号替换溢出文字。** text container 默认宽度为 1000，这比一般的跑马灯标签实际宽度要大。而这也就导致了上述的问题，最外层的 `View` 的宽度也变成了 1000。
+
+```js
+<View class="marquee-label">
+  <View class="marquee-label-text-container">
+    <Text class="marquee-label-text">{text}</Text>
+  </View>
+</View>
+```
+
+**因此要注意：**
+
+- 在 Android 平台上，通过 `width` 或者 `flex` 布局来设置最外层 `View` 的样式都没问题。
+- 在 iOS 平台上，请使用并且只能使用 `width` 来设置样式。

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9694

increased by30.03%

Number of package files

5

increased by25%

Lines of code

115

increased by10.58%

Number of lines in readme file

109

increased by78.69%

No dependency changes