1.react-native 是一套代码可以在安卓和ios二个终端运行的,移动端app。它没有继承样式的属性,写字体样式大小的时候不需要带px单位,它整体采用flex弹性布局,flex-direction 默认为y轴为主轴flex-direction:column 所以的盒子都是默认flex布局的
2.标签有View 是相当于div 的盒子标签 还有Text 是文本标签
<StatusBar backgroundColor='transparent' translucent={true}>,背景图片到啦刘海屏幕下面显示啦 Platform :是判断机型是安卓还是ios系统 ,:实例如下
if (Platform.os==='ios'){borderRadius=5},如果是ios按钮边框圆角为5有圆角,安卓则没有
<Dimensions> 是获取当前屏幕的宽高组件 const widthPx= Dimensions.get('window').width
const heightPx=Dimensions.get('window').height
<Text numberOfLines={1}> 文字超出部分显示...省略号
TextInput 是输入框标签 ,TouchableOpacity 是点击后有透明度的变化
ScrollView 是滑动标签
Image 是图片标签
//这个是本地图片的引入
<Image source={require('./assets/1.png')} />
//这个是网路图片的引入
<Image style={{width:80,height:80}} source={{uri:'https://www.dia.com'}} />
活动指示器就是locading指示为:ActivityIndicator 一个会旋转的locading
样式写在export default App 后面
const styles = styleSheet.create({
arr{width:80,height:80}
}) StyleSheet.create
的创建是可选的,但提供了一些关键优势。它通过将它们转换为引用一个内部表的纯数字,来确保值是不可变的和不透明的。通过将它放在文件的最后,也确保了它们为应用程序只创建一次,而不是每一个 render 都创建。
弹出框Alert 用法通过Alert.alert(‘删除啦’)
//Alert.alert('这是标题','这是描述文字')
//同时添加, OK 和 CANCEL 按钮
Alert.alert(
'这是标题',
'这是描述',
[
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => console.log('OK Pressed')},
]
)
//自定义弹框
Alert.alert(
'这是标题',
'这是描述',
[
{text: '这是自定义按钮', onPress: () => console.log('Ask me later pressed')},
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => console.log('OK Pressed')},
]
)
存储数据的组件 : AsyncStorage 它返回一个promise对象,需要用async 和await去修饰一下
存数据:AsyncStorage.setItem('name',this.state.msg)
取数据: 通过async和await修饰一下:AsyncStorage.getItem('name')
动画组件 :Animated 用法Animated.View
检测机型组件:React Native 提供了一个检测当前运行平台的模块。如果组件只有一小部分代码需要依据平台定制,那么这个模块就可以派上用场
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
height: Platform.OS === 'ios' ? 200 : 100
});
开关组件 :Switch 组件通过控制Textvalue的值为true或者为false ,从而控制开和关
Clipboard 组件
剪切板的内容组件,里面有复制,粘贴,剪切
需要注意的是Clipboard的属性,getString()
和 setString()
都是异步操作,返回的是一个 Promise
下面的范例,当我们点击 写入剪贴板 时往剪贴板中输入内容,当我们点击 读取剪贴板 时从 剪贴板中读取 内容
import React, {Component} from 'react';
import {Text,View,TouchableHighlight,Alert} from 'react-native';
export default class App extends Component{
async getContent() {
var content = await Clipboard.getString();
Alert.alert("剪贴板内容",content)
}
setContent() {
Clipboard.setString('简单教程 https://www.twle.cn/');
}
render() {
return (
<View>
<View style={{margin:20}}>
<TouchableHighlight onPress={() => setContent()}>
<Text>写入剪贴板</Text>
</TouchableHighlight>
</View>
<View style={{margin:20}}>
<TouchableHighlight onPress={() => getContent()} >
<Text>读取剪贴板</Text>
</TouchableHighlight>
</View>
</View>
);
}
}
BackgroundImage 组件,是背景图片组件
ImageBackground
组件实现了 <Image>
同样的属性,也就说,具有 resizeMode
图片的模式、 source 图片的引入
两个重要属性。
<ImageBackground
source={...}
style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
下面的范例演示了 ImageBackground 组件的基本使用
import React, {Component} from 'react';
import {Text,View,ImageBackground} from 'react-native';
export default class App extends Component{
constructor(props) {
super(props);
this.imgRef = React.createRef();
}
render() {
return (
<View>
<ImageBackground
style={{width:300,height:169}}
source={{uri:'https://www.twle.cn/static/i/img1.jpg'}}
imageRef={this.myRef}
imageStyle={{width:300,height:169}}>
<Text>简单教程,简单编程</Text>
<Text>https://www.twle.cn</Text>
</ImageBackground>
</View>
);
}
}
NetInfo 模块:用于获取当前用户的网络状态,有有网络( online ) 或者 无网络 ( offline )
安装 react-native-community/react-native-netinfo
模块
//第一步
yarn add @react-native-community/netinfo
//或者用npm
npm install --save @react-native-community/netinfo
//第二步,安装完成后还需要 连接
react-native link @react-native-community/netinfo
导入模块
//第一种导入
import { NetInfo } from 'react-native'
//第二种导入
import NetInfo from "@react-native-community/netinfo";
下面的范例,使用 NetInfo
模块的 getConnectionInfo()
方法立即获取当前的网络状态
import React, {Component} from 'react';
import {Text,View, NetInfo} from 'react-native';
export default class App extends Component{
constructor(props) {
super(props)
this.state = {
connectionInfo:{
type:'none',
effectiveType:'ethernet'
}
}
var that = this;
NetInfo.getConnectionInfo().then((connectionInfo) => {
that.setState({connectionInfo})
});
}
render() {
const {connectionInfo} = this.state
return (
<View>
<Text>当前的网络类型是: {connectionInfo.type } - {connectionInfo.effectiveType} </Text>
<Text>简单教程,简单编程 (https://www.twle.cn)</Text>
</View>
);
}
}
下面的范例,使用 NetInfo
模块的 addEventListener()
方法添加一个网络变更事件监听器
import React, {Component} from 'react';
import {Text,View, NetInfo} from 'react-native';
export default class App extends Component{
constructor(props) {
super(props)
this.state = {
connectionInfo:{
type:'none',
effectiveType:'ethernet'
}
}
// 添加
NetInfo.addEventListener('connectionChange', this.handleFirstConnectivityChange.bind(this));
var that = this;
NetInfo.getConnectionInfo().then((connectionInfo) => {
that.setState({connectionInfo})
});
}
// 回调函数
handleFirstConnectivityChange(connectionInfo) {
this.setState({connectionInfo})
//移除
NetInfo.removeEventListener('connectionChange',this.handleFirstConnectivityChange.bind(this));
}
render() {
const {connectionInfo} = this.state
return (
<View>
<Text>当前的网络类型是: {connectionInfo.type } - {connectionInfo.effectiveType} </Text>
<Text>简单教程,简单编程 (https://www.twle.cn)</Text>
</View>
);
}
}
Button按钮
下面的范例,我们布局了一个按钮 Button
,当点击按钮时弹出提示
import React from 'react';
import {Alert,Button} from 'react-native';
export default class App extends React.Component {
render() {
return (
<Button
onPress={(e) => Alert.alert("你点击了按钮")}
//就是按钮显示的内容
title="快点我"
color="#841584"
//手机会读取这个段内容,给残疾人士准备的
accessibilityLabel="please press me"
/>
);
}
}
Picker 组件
Picker
组件会渲染一个选择框,类似于 HTML 中的 <select>
标签,下拉框组件
下面的范例演示了 Picker 的基本使用
import React, {Component} from 'react';
import {Text,View,Picker} from 'react-native';
export default class App extends Component{
constructor(props) {
super(props)
this.state = {language:"请选择语言..."}
}
render() {
return (
<View style={{margin:50}}>
<Picker
selectedValue={this.state.language}
style={{height: 50, width: 100}}
onValueChange={(itemValue, itemIndex) =>
this.setState({language: itemValue})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="简单教程" value="twle" />
</Picker>
</View>
);
}
}
Modal 组件:Modal 组件提供了一种覆盖在其它视图之上显示内容的简单方法。也就是常常会用到的 模态 对话框
import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';
class ModalExample extends Component {
state = {
modalVisible: false,
};
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View style={{marginTop: 22}}>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={{marginTop: 22}}>
<View>
<Text>Hello World!</Text>
<TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight
onPress={() => {
this.setModalVisible(true);
}}>
<Text>Show Modal</Text>
</TouchableHighlight>
</View>
);
}
}