123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110 |
- import React, { Component } from 'react';
- import {
- // AppRegistry,
- Image,
- StyleSheet,
- Text,
- View
- } from 'react-native';
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#f92',
- alignItems: 'center',
- justifyContent: 'center',
- },
- });
- class App extends Component {
- render() {
- return (
- <View style={styles.container}>
- <Text>Open up App.js to start working on your app!</Text>
- <Text>Changes you make will automatically reload.</Text>
- <Text>Shake your phone to open the developer menu.</Text>
- </View>
- );
- }
- }
- class Bananas extends Component {
- render() {
- const pic = {
- uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg',
- };
- const img = (
- <Image source={pic} style={{
- backgroundColor: 'orange',
- height: 110,
- opacity: 0.9,
- width: '100%',
- }} />
- );
- return (
- img
- );
- }
- }
- class Greeting extends Component {
- render() {
- return (
- <Text>Hello {this.props.name}!</Text>
- );
- }
- }
- class LotfOfGreetings extends Component {
- render() {
- return (
- <View style={styles.container}>
- <Greeting name="Rexxar" />
- <Greeting name="Jaina" />
- <Greeting name="Valeera" />
- </View>
- );
- }
- }
- 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);
|