react-native简单使用

基本组件的使用介绍

  • 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}
          
          

          {/* 引入本地的图片资源 */}
          
          
          
          

          {/* 引入网络中的图片资源,除了要指定 一个 uri 资源路径之外,还需要 为这张网络图片,指定宽和高,否则显示不出来; */}
          

          {/* 在 Button 按钮中, title 属性 和 onPress 属性是必须的 */}
          {/* onPress 表示点击按钮,要触发的操作 */}
          

        
      
    );
  }
}

// 使用 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 库提供的 固有组件;不能使用 网页中的 任何 元素;

你可能感兴趣的:(react-native简单使用)