App.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. import React, { Component } from 'react';
  2. import { AppRegistry, Image, StyleSheet, Text, View } from 'react-native';
  3. const styles = StyleSheet.create({
  4. container: {
  5. flex: 1,
  6. backgroundColor: '#fe8',
  7. alignItems: 'center',
  8. justifyContent: 'center',
  9. },
  10. });
  11. class App extends Component {
  12. render() {
  13. return (
  14. <View style={styles.container}>
  15. <Text>Open up App.js to start working on your app!</Text>
  16. <Text>Changes you make will automatically reload.</Text>
  17. <Text>Shake your phone to open the developer menu.</Text>
  18. </View>
  19. );
  20. }
  21. }
  22. class Bananas extends Component {
  23. render() {
  24. const pic = {
  25. uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg',
  26. };
  27. const img = (
  28. <Image source={pic} style={{
  29. backgroundColor: 'orange',
  30. height: 110,
  31. opacity: 0.9,
  32. width: '100%',
  33. }} />
  34. );
  35. return (
  36. img
  37. );
  38. }
  39. }
  40. class Greeting extends Component {
  41. render() {
  42. return (
  43. <Text>Hello {this.props.name}!</Text>
  44. );
  45. }
  46. }
  47. export default class LotfOfGreetings extends Component {
  48. render() {
  49. return (
  50. <View style={styles.container}>
  51. <Greeting name="Rexxar" />
  52. <Greeting name="Jaina" />
  53. <Greeting name="Valeera" />
  54. </View>
  55. );
  56. }
  57. }
  58. // skip this line if using Create React Native App
  59. // AppRegistry.registerComponent('AwesomeProject', () => Bananas);