文件内容解析

Posted 2020-08-09 玉思盈蝶

下面是我的第一个React Native程序,也是自己对该程序的文件内容解析一些理解,注释很清楚哟,相信你一看就懂!!!!

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

// 1.引入组件
import React, { Component } from ‘react‘;
import {
  AppRegistry, // 注册
  StyleSheet,  // 样式
  Text,  // 文本组件
  View,  // 视图组件
  Image, // 图片组件
  TextInput,  //输入框组件
} from ‘react-native‘;

class AwesomeProject extends Component {

  // 2. 设置界面 ---- 写结构和内容
  // 函数-- 初始化方法  相当于OC的viewDidLoad -->返回具体的组件内容
  render() {

    // 通过return()返回
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          SiSi
        </Text>
        <Text style={styles.instructions}>
          SiSi
        </Text>
        <Text style={styles.instructions}>
          SiSi
        </Text>
          <Text>Hello!{this.props.name}!
        </Text>
      </View>
    );
  }
}

// 3.设置样式
const newStyle = StyleSheet.create({

});
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘red‘,
  },
  welcome: {
    fontSize: 20,
    textAlign: ‘center‘,
    margin: 10,
  },
  instructions: {
    textAlign: ‘center‘,
    color: ‘#333333‘,
    marginBottom: 5,
  },
});

AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);