基本组件的使用介绍
- View：
- Text：
- TextInput：
- Image：
- Button：
- ActivityIndicator：
- ScrollView：这是一个列表滚动的组件
- ListView：也是一个列表滚动的组件，但是，这个组件已经过时了，官方推荐使用 FlatList 来代替它
index.js
// 从 Reactnative 的包中，导入 AppRegistry 组件，它的作用，就是注册项目首页的
import { AppRegistry } from 'react-native';
import App from './App';
// 导入自己的组件页面
import MyHomePage from './MyHomePage.js'
// 当使用 AppRegistry 注册项目的时候，方法中的第一个参数，不要改，否则项目就废了
// 第二个参数，表示要把哪个页面注册为项目的首页
AppRegistry.registerComponent('rn_douban', () => App);
MyHomePage.js
// 在 RN 中只能使用 .js 作为 组件的后缀名，不能使用 .jsx
import React, { Component } from 'react'
// View 组件负责布局，就好比 网页中的 div 元素
import { View, Text } from 'react-native'
export default class MyHomePage extends Component {
// constructor 一般也推荐都写出来
constructor(props) {
super(props)
this.state = {}
}
// 必须有 render 函数
render() {
// 1, 在 RN 中，不能使用 网页中的 所有标签，像 div ， p , img不能用
// 2. 如果想要实现布局， RN 提供了 View 的组件，来实现布局；RN 提供了一系列基础的组件，来方便程序员的开发，如果想要使用这些组件，只需 按需 把 组件 从 'react-native' 中导入即可
return
{/* 在 RN 中，所有的文本，必须使用 RN 提供的 Text 组件进行包裹；否则会报错 */}
123456~~~~~
}
}
app.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
// 导入 React 基础包，这个包，作用是创建 组件
import React, { Component } from 'react';
// 从 react-native 中导入系统开发需要的包
import {
Platform, // 用来提供平台检测功能的
StyleSheet, // 样式相关的组件，专门用来创建样式的
Text, // 文本节点，所有文本必须放到这个里面
View, // 用来布局的，相当于 div
TextInput, // 文本框组件
Image, // 图片组件
Button, // 按钮组件
ActivityIndicator, // 加载中的 loading 效果小圆圈
ScrollView, // 滚动组件（默认，如果一个RN的页面非常长，超出了屏幕高度，这时候，不会像网页中那样自动提供滚动条，如果需要让页面实现滚动的话，需要使用 ScrollView 把页面包裹起来）
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
// 这是 TS（TypeScript） 的语法
export default class App extends Component {
render() {
return (
{/* 如果使用 animating 隐藏 loading效果，只是让他不可见了，但是区域还在 */}
Welcome to React Native!
To get started, edit App.js
{instructions}
);
}
}
// 使用 StyleSheet.create 创建样式表对象，可以为 create 传递 一个配置对象，这个对象，就是要创建的样式
const styles = StyleSheet.create({
container: {
flex: 1,
// 在RN中，主轴默认是纵向的
justifyContent: 'flex-start', // 一些 文本类型的 样式值，需要使用 引号包裹起来
alignItems: 'flex-start',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20, // 长度单位的 px 值可以省略，因为 RN 默认就是以 px 作为单位的
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
inputStyle: {
width: '100%'
}
});
// 总结：如果要定义一个基本的 RN 页面：需要的步骤：
// 1. 导入 react 包，来创建组件
// 2. 导入 react-native 包，来提供基础的开发组件
// 3. 从 react-naitve 中，可以导入 StyleSheet 的组件，用它 的 create 方法，可以创建样式对象
// 4. 使用 react 基础的语法，创建出来的组件，就是一个 合法的 RN 组件页面；如果想要在页面中，放置一些合法的 页面元素，只能使用 RN 库提供的 固有组件；不能使用 网页中的 任何 元素；