ReactNative组件

最新推荐文章于 2021-11-09 16:37:23 发布

flybirding10011

最新推荐文章于 2021-11-09 16:37:23 发布

阅读量172

点赞数

ReactNative组件

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

该文档要配合项目文档地址ReactNative豆瓣电影看会更好

这里只写我在进行ReactNative豆瓣电影项目的时候去ReactNative官网研究过的组件

Platform: 用来提供平台检测功能的
StyleSheet: 样式相关的组件，专门用来创建样式的
Text: 文本节点，所有文本必须放到这个里面
View: 用来布局的，相当于 div
TextInput: 文本框组件
Image: 图片组件
Button: 按钮组件
ActivityIndicator: 加载中的 loading 效果小圆圈
ScrollView: 滚动组件（默认，如果一个RN的页面非常长，超出了屏幕高度，这时候，不会像网页中那样自动提供滚动条，如果需要让页面实现滚动的话，需要使用 ScrollView 把页面包裹起来）

基本都是导入组件，然后在首页中用render()渲染就可以了，真是超级无敌爆炸爽

// 导入 React 基础包，这个包，作用是创建 组件
import React, { Component } from 'react'
// 从 react-native 中导入系统开发需要的包
import {Platform, StyleSheet, Text, View ...} from 'react-native'

Platform

用来提供平台检测功能

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',
});

StyleSheet

使用 StyleSheet.create 创建样式表对象，可以为 create 传递一个配置对象，这个对象就是要创建的样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center', // 一些文本类型的样式值，需要引号包裹起来
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

载入样式(和对象的操作一样，例如style.welcome)

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        ...
      </View>
    );
  }
}

Text

文本节点，所有文本必须放到这个里面，在项目文档地址上面首页中有讲到

View

用来布局的，相当于页面元素div，在项目文档地址上面首页中有讲到

TextInput

文本框组件

这里刚开始输入框会特别窄，所以需要修改样式

在styles对象中添加一个一个键值对inputStyle: { width: '100%' }

TextInput有很多属性选项，这里使用的几个练手,具体参考ReactNative官方文档

allowFontScaling

控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为true。

类型	必填
bool	No

autoCapitalize

控制TextInput是否要自动将特定字符切换为大写，This property is not supported by some keyboard types such as name-phone-pad.

characters: 所有的字符。
words: 每个单词的第一个字符。
sentences: 每句话的第一个字符（默认）。
none: 不切换。

类型	必填
enum(‘none’, ‘sentences’, ‘words’, ‘characters’)	No

autoFocus

如果为true，在componentDidMount后会获得焦点。默认值为false。

类型	必填
bool	No

defaultValue

提供一个文本框中的初始值。当用户开始输入的时候，值就可以改变。在一些简单的使用情形下，如果你不想用监听消息然后更新value属性的方法来保持属性和状态同步的时候，就可以用defaultValue来代替。

类型	必填
string	No

keyboardType

决定弹出的何种软键盘的，譬如numeric（纯数字键盘）。

这些值在所有平台都可用：

default
number-pad
decimal-pad
numeric
email-address
phone-pad

下面的值仅iOS可用：

ascii-capable
numbers-and-punctuation
url
name-phone-pad
twitter
web-search

下面的值仅Android可用：

visible-password

类型	必填
enum(‘default’, ‘email-address’, ‘numeric’, ‘phone-pad’, ‘ascii-capable’, ‘numbers-and-punctuation’, ‘url’, ‘number-pad’, ‘name-phone-pad’, ‘decimal-pad’, ‘twitter’, ‘web-search’, ‘visible-password’)	No