Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remobile/react-native-marquee-label
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])
https://github.com/remobile/react-native-marquee-label
Last synced: 28 days ago
JSON representation
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])
- Host: GitHub
- URL: https://github.com/remobile/react-native-marquee-label
- Owner: remobile
- License: mit
- Created: 2015-11-04T07:12:05.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-16T03:40:11.000Z (about 7 years ago)
- Last Synced: 2024-11-10T02:43:13.413Z (about 1 month ago)
- Language: Objective-C
- Homepage:
- Size: 1020 KB
- Stars: 116
- Watchers: 3
- Forks: 24
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-marquee-label ★100 - A marquee label for react-native (Components / UI)
- awesome-reactnative-ui - react-native-marquee-label - native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])|<ul><li>Last updated : 1 month ago</li><li>Stars : 103</li><li>Open issues : 10</li></ul>|| (Others)
- awesome-react-native - react-native-marquee-label ★100 - A marquee label for react-native (Components / UI)
- awesome-react-native - react-native-marquee-label ★100 - A marquee label for react-native (Components / UI)
- awesome-reactnative-ui - react-native-marquee-label - native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])|<ul><li>Last updated : 1 month ago</li><li>Stars : 103</li><li>Open issues : 10</li></ul>|| (Others)
- awesome-react-native - react-native-marquee-label ★100 - A marquee label for react-native (Components / UI)
- awesome-react-native-ui - react-native-marquee-label ★37 - A marquee label for react-native (Components / UI)
README
# React Native MarqueeLabel (remobile)
A marquee label for react-native
* if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ]
## Installation
```sh
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)
```gradle
...
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`
```gradle
...
dependencies {
...
compile project(':react-native-marquee-label')
}
```
* register module (in MainApplication.java)
```java
......
import com.remobile.marqueeLabel.RCTMarqueeLabelPackage; // <--- import
......
@Override
protected List getPackages() {
......
new RCTMarqueeLabelPackage(), // <------ add here
......
}
```
## Usage
### Example
```js
'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 (
fangyunjiang is a good developer
);
}
});
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
### 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
* https://github.com/remobile/react-native-template