做了十年的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布局。