自学ReactNative第一天

 做了十年的iOS开发，今天是第一天学习ReactNative。reactNative与OC、swift还是有很多不同。

为了学习，拒绝CV

首先参考官网：https://www.reactnative.cn/docs/getting-started

预备知识：要使用 React Native，你需要对 JavaScript 基础知识有所了解，

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript

准备工作：开发工具、常用的扩展组件、环境搭建、脚手架安装请移步到百度！~

Visual Studio Code 、ES7+React

最熟悉的：Hello World，首先，我们在vsCode中，创建一个MTextView.js，与OC不同,".js"一定要手动输入

improt React from 'react'     //相当于iOS的 #improt<UIKit/UIkit.h>

import {Text,view} from 'react-native'  //引入组件

const MTextView = () =>{

    return (

        <View style= {{flex:1, justifycontent:'center', alignItems:'center'}}>//样式、满屏、组件中心对齐，

            <Text style={{textAlign:'center'}}>//文字中心对齐 文字可以添加 左对齐、中心对齐、右对齐  默认left对齐

                hello word !~

            <Text>

        <View>

    );

}

export default MTextView //导出组件

如果、不想一行一行的写，那么ES7+React 的作用就体现出来了，只需要 输入rnfe 然后回车，会有奇迹出现。

import { View, Text } from 'react-native'

import React from 'react'

const MTextView = () => {

  return (

    <View>

      <Text>MTextView</Text>

    </View>

  )

}

export default MTextView

我们只需要定义<View>的样式和<Text>的文字即可。

如果，需要跳转，那么必须在结尾添加注册：

AppRegistry.registerComponent('MTextView',()=>MTextView)

然后在index.js 中引入import MTextView from './src/views/malinViews/mlButton'  //'./src/views/malinViews/mlButton'   是组件所在的路径

问题：对于没有学习过JS的，那么页面布局对于初学者来说，是一个问题。下面是一个初学者学习Flex布局。