react-native-flutter

a component flutter on react native

installation

npm install react-native-flutter --save

##Basic Usage there is one way to use flutter,calling api

import Flutter from 'react-native-flutter'
class Demo extends Component {

componentDidMount() {
    const options = {container: <Text>this is a multiton fluter view</Text>, onPress: this.showSingleton}
    setTimeout(()=> {
        const flutter=Flutter.onShowMultiton(options)
        setTimeout(()=>{
            Flutter.onDestroy(flutter)
        },3000)
    }, 1000)
}

showSingleton() {
    let options = {
        container: <Text>this is a singleton fluter view</Text>,
        position: {top: 40, right: 20},
        onPress: ()=>Flutter.onDestroy()
    }
    Flutter.onShowSingleton(options)
}

render() {
    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
                To get started, edit index.ios.js
            </Text>
            <Text style={styles.instructions}>
                Press Cmd+R to reload,{'\n'}
                Cmd+D or shake for dev menu
            </Text>
        </View>
    );
}
}

####api for flutter

the view will float on your app root view

Flutter.onShowSingleton(options): the options for flutter view,to control what you want to flutter,if you want to destroy it on options,you should use this function

Flutter.onShowMultiton(options): the same to onShowSingleton,and it will return instance.

**Flutter.onDestroy(flutter?):**if you use Flutter.onShowMultiton, the params of flutter must be return from Flutter.onShowMultiton,if use Flutter.onShowSingleton,the params of flutter not to pass

options:

option	type	isRequire	des
container	element	true	the view you want to flutter
position	object	false	the animate end position,it must be contain top,left,right,bottom,like this {top:100,left:20}
duration	number	false	the duration of the animate for flutter view
onPress	func	false	when you onPress flutter,the function will execute
onAnimationEnd	func	false	the animate end callback
animation	string	false	animation reference react-native-animatable

screenShot