|
@@ -1,10 +1,16 @@
|
|
|
import React, { Component } from 'react';
|
|
|
-import { AppRegistry, Image, StyleSheet, Text, View } from 'react-native';
|
|
|
+import {
|
|
|
+ // AppRegistry,
|
|
|
+ Image,
|
|
|
+ StyleSheet,
|
|
|
+ Text,
|
|
|
+ View
|
|
|
+} from 'react-native';
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
container: {
|
|
|
flex: 1,
|
|
|
- backgroundColor: '#fe8',
|
|
|
+ backgroundColor: '#f92',
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center',
|
|
|
},
|
|
@@ -51,7 +57,7 @@ class Greeting extends Component {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-export default class LotfOfGreetings extends Component {
|
|
|
+class LotfOfGreetings extends Component {
|
|
|
render() {
|
|
|
return (
|
|
|
<View style={styles.container}>
|
|
@@ -63,5 +69,42 @@ export default class LotfOfGreetings extends Component {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+class Blink extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = { isShowingText: true };
|
|
|
+
|
|
|
+ setInterval(() => {
|
|
|
+ this.setState(previousState => ({
|
|
|
+ isShowingText: !previousState.isShowingText,
|
|
|
+ }));
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const display = this.state.isShowingText
|
|
|
+ ? this.props.text
|
|
|
+ : ' ';
|
|
|
+
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Text>{display}</Text>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default class BlinkApp extends Component {
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <View style={styles.container}>
|
|
|
+ <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>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// skip this line if using Create React Native App
|
|
|
// AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|