0.3.0 • Published 8 years ago

react-native-flutter v0.3.0

Weekly downloads
2
License
MIT
Repository
github
Last release
8 years ago

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:

optiontypeisRequiredes
containerelementtruethe view you want to flutter
positionobjectfalsethe animate end position,it must be contain top,left,right,bottom,like this {top:100,left:20}
durationnumberfalsethe duration of the animate for flutter view
onPressfuncfalsewhen you onPress flutter,the function will execute
onAnimationEndfuncfalsethe animate end callback
animationstringfalseanimation reference react-native-animatable