您的位置: 首页  >  IT文章  >  react-native简单使用

react-native简单使用

分类: IT文章 • 2023-10-09 16:05:20

基本组件的使用介绍

  • 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 <View>
      {/* 在 RN 中，所有的文本，必须使用 RN 提供的 Text 组件进行包裹；否则会报错 */}
      <Text>123456~~~~~</Text>
    </View>
  }
}

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,
' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,
' +
    'Shake or press menu button for dev menu',
});

// 这是 TS（TypeScript） 的语法
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        {/* 如果使用 animating 隐藏 loading效果，只是让他不可见了，但是区域还在 */}
        <ScrollView style={{ '100%'}}>
          <ActivityIndicator color="red" size="large" animating={true}></ActivityIndicator>
          <Text style={styles.welcome}>
            Welcome to React Native!
        </Text>
          <Text style={styles.instructions}>
            To get started, edit App.js
        </Text>
          <Text style={styles.instructions}>
            {instructions}
          </Text>
          <TextInput style={styles.inputStyle} defaultValue="哈哈，今天总有人在后面说话" secureTextEntry={true}></TextInput>

          {/* 引入本地的图片资源 */}
          <Image source={require('./images/1.jpg')}></Image>
          <Image source={require('./images/1.jpg')}></Image>
          <Image source={require('./images/1.jpg')}></Image>
          <Image source={require('./images/1.jpg')}></Image>

          {/* 引入网络中的图片资源，除了要指定 一个 uri 资源路径之外，还需要 为这张网络图片，指定宽和高，否则显示不出来； */}
          <Image source={{ uri: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=358796479,4085336161&fm=200&gp=0.jpg' }} style={{  200, height: 160 }}></Image>

          {/* 在 Button 按钮中， title 属性 和 onPress 属性是必须的 */}
          {/* onPress 表示点击按钮，要触发的操作 */}
          <Button title="这是一个按钮" onPress={() => { console.warn('123') }}></Button>

        </ScrollView>
      </View>
    );
  }
}

// 使用 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: {
     '100%'
  }
});



// 总结：如果要定义一个基本的 RN 页面：需要的步骤：
// 1. 导入 react 包，来创建组件
// 2. 导入 react-native 包，来提供基础的开发组件
// 3. 从 react-naitve 中，可以导入 StyleSheet 的组件，用它 的 create 方法，可以创建样式对象
// 4. 使用 react 基础的语法，创建出来的组件，就是一个 合法的 RN 组件页面；如果想要在页面中，放置一些合法的 页面元素，只能使用 RN 库提供的 固有组件；不能使用 网页中的 任何 元素；

相关推荐