A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])
Objective-C Java JavaScript
Switch branches/tags
Nothing to show
Latest commit 384c706 Oct 16, 2017 @fov42550564 fov42550564 update to 1.0.4
Permalink
Failed to load latest commit information.
android update to 1.0.4 Oct 16, 2017
ios 发布1.0.3 Feb 22, 2017
screencasts init commit Nov 4, 2015
.gitignore move to remobile Dec 8, 2015
.npmignore move to remobile Dec 8, 2015
LICENSE init commit Nov 4, 2015
README.md Update README.md Dec 11, 2016
index.js eslint code Mar 30, 2017
package.json update to 1.0.4 Oct 16, 2017

README.md

React Native MarqueeLabel (remobile)

A marquee label for react-native

Installation

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

Installation (iOS)

  • Drag RCTMarqueeLabel.xcodeproj to your project on Xcode.
  • Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTMarqueeLabel.a from the Products folder inside the RCTMarqueeLabel.xcodeproj.
  • Look for Header Search Paths and make sure it contains both $(SRCROOT)/../../../react-native/React as recursive.

Installation (Android)

...
include ':react-native-marquee-label'
project(':react-native-marquee-label').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-marquee-label/android/RCTMarqueeLabel')
  • In android/app/build.gradle
...
dependencies {
    ...
    compile project(':react-native-marquee-label')
}
  • register module (in MainApplication.java)
......
import com.remobile.marqueeLabel.RCTMarqueeLabelPackage;  // <--- import

......

@Override
protected List<ReactPackage> getPackages() {
   ......
   new RCTMarqueeLabelPackage(),            // <------ add here
   ......
}

Usage

Example

'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

loading

Props

  • text : PropTypes.string.isRequired
  • scrollDuration : PropTypes.number //seconds
  • 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

see detail use