React Native Components in Flutter https://facebook.github.io/react-native/docs/state & https://facebook.github.io/react-native/docs/style
import 'package:flutter/material.dart'; | |
Stream<bool> interval = | |
Stream.periodic(Duration(seconds: 1), (i) => (i % 2 == 0)) | |
.asBroadcastStream(); | |
class Blink extends StatelessWidget { | |
String text; | |
Blink({Key key, this.text}) : super(key: key); | |
@override | |
build(context) { | |
return StreamBuilder( | |
stream: interval, | |
builder: (context, snapshot) { | |
return snapshot.data ? Text(text) : Container(); | |
}); | |
} | |
} | |
class BlinkApp extends StatelessWidget { | |
@override | |
build(context) { | |
return Column(children: [ | |
Blink(text: 'I love to blink'), | |
Blink(text: 'Yes blinking is so great'), | |
Blink(text: 'Why did they ever take this out of HTML'), | |
Blink(text: 'Look at me look at me look at me') | |
]); | |
} | |
} |
import 'package:flutter/material.dart'; | |
class Blink extends StatefulWidget { | |
String text; | |
Blink({Key key, this.text}) : super(key: key); | |
BlinkState createState() => BlinkState(); | |
} | |
class BlinkState extends State<Blink> { | |
bool _isShowingText = true; | |
BlinkState() { | |
Stream.periodic(Duration(seconds: 1)).listen((v) => setState(() { | |
_isShowingText = !_isShowingText; | |
})); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return _isShowingText ? Text(widget.text) : Container(); | |
} | |
} | |
class BlinkApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return Column(children: [ | |
Blink(text: 'I love to blink'), | |
Blink(text: 'Yes blinking is so great'), | |
Blink(text: 'Why did they ever take this out of HTML'), | |
Blink(text: 'Look at me look at me look at me') | |
]); | |
} | |
} |
import React, { Component } from 'react'; | |
import { AppRegistry, Text, View } from 'react-native'; | |
class Blink extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { isShowingText: true }; | |
setInterval(() => ( | |
this.setState(previousState => ( | |
{ isShowingText: !previousState.isShowingText } | |
)) | |
), 1000); | |
} | |
render() { | |
if (!this.state.isShowingText) { | |
return null; | |
} | |
return ( | |
<Text>{this.props.text}</Text> | |
); | |
} | |
} | |
export default class BlinkApp extends Component { | |
render() { | |
return ( | |
<View> | |
<Blink text='I love to blink' /> | |
<Blink text='Yes blinking is so great' /> | |
<Blink text='Why did they ever take this out of HTML' /> | |
<Blink text='Look at me look at me look at me' /> | |
</View> | |
); | |
} | |
} |
import 'package:flutter/material.dart'; | |
var bigBlue = TextStyle( | |
color: Colors.blue, | |
fontWeight: FontWeight.bold, | |
fontSize: 30 | |
); | |
var red = TextStyle(color: Colors.red); | |
class LotsOfStyles extends StatelessWidget { | |
build(context) { | |
return Column( | |
children: [ | |
Text('just red', style: red), | |
Text('just bigBlue', style: bigBlue), | |
Text('big blue, then red', style: bigBlue.merge(red)), | |
Text('red, then big blue', style: red.merge(bigBlue)), | |
]); | |
} | |
} |
import React, { Component } from 'react'; | |
import { AppRegistry, StyleSheet, Text, View } from 'react-native'; | |
const styles = StyleSheet.create({ | |
bigblue: { | |
color: 'blue', | |
fontWeight: 'bold', | |
fontSize: 30, | |
}, | |
red: { | |
color: 'red', | |
}, | |
}); | |
export default class LotsOfStyles extends Component { | |
render() { | |
return ( | |
<View> | |
<Text style={styles.red}>just red</Text> | |
<Text style={styles.bigblue}>just bigblue</Text> | |
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text> | |
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text> | |
</View> | |
); | |
} | |
} | |
// skip this line if using Create React Native App | |
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment