Cách Thêm Nhãn Marquee vào Ứng dụng React Native của Bạn

React Native MarqueeLabel (remobile)

Một nhãn marquee cho react-native

• Nếu bạn sử dụng marquee js thuần, hãy sử dụng remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ]

Cài đặt

npm install @remobile/react-native-marquee-label --save

Cài đặt (iOS)

• Kéo RCTMarqueeLabel.xcodeproj vào dự án của bạn trên Xcode.
• Nhấp vào tệp dự án chính của bạn (tệp đại diện cho .xcodeproj) chọn Build Phases và kéo libRCTMarqueeLabel.a từ thư mục Sản phẩm bên trong RCTMarqueeLabel.xcodeproj.
• Tìm Header Search Paths và đảm bảo rằng nó chứa cả $(SRCROOT)/../../../react-native/React như đệ quy.

Cài đặt (Android)

...
include ':react-native-marquee-label'
project(':react-native-marquee-label').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-marquee-label/android/RCTMarqueeLabel')

• Trong android/app/build.gradle

  …
  dependencies {
  …
  compile project(‘:react-native-marquee-label’)
  }

• Đăng ký module (trong MainApplication.java)

  ……
  import com.remobile.marqueeLabel.RCTMarqueeLabelPackage; // <— import

  ……

  @Override
  protected List getPackages() {
  ……
  new RCTMarqueeLabelPackage(), // <—— add here
  ……
  }

Sử dụng

Ví dụ

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View
} = ReactNative;

var MarqueeLabel = require('@remobile/react-native-marquee-label');

module.exports = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
                <MarqueeLabel style={styles.marqueeLabel}
                    scrollDuration={3.0}
                    >
                    fangyunjiang is a good developer
                </MarqueeLabel>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    marqueeLabel: {
        backgroundColor: 'blue',
        width:260,
        height:200,
        fontSize:30,
        fontWeight:'800',
        color:'white',
    }
});

Screencasts

Thuộc tính

• text : PropTypes.string.isRequired
• scrollDuration : PropTypes.number //giây
• marqueeType : PropTypes.string //ios
• fadeLength : PropTypes.number //ios
• leadingBuffer : PropTypes.number //ios
• trailingBuffer : PropTypes.number //ios
• isRepeat : PropTypes.bool //android
• startPoint : PropTypes.number //android
• direction : PropTypes.number //android

xem chi tiết cách sử dụng

• https://github.com/remobile/react-native-template

Chi tiết tải về:

Tác giả: remobile
Nguồn: https://github.com/remobile/react-native-marquee-label

Giấy phép: MIT license