React

一、React、React.js和React Native的关系

React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页。

在React之上发展出了React.js框架用来开发网页,发展出来React Native用来开发移动应用。

因为React基础框架与React.js框架是同时出现、同时进化发展的,就造成了React基础框架的基本概念、设计思想都是在React.js的相关文档中描述的。

后来,Facebook推出React Native后,也没有把React的相关概念文档从React.js文档中分离出来,就导致了学React Native要去看React.js文档。

二、React Native开发特点1、一次学习,随处编写;

使用React Native可以为iOS和Android操作系统开发应用程序,不同平台上的代码根据平台会有一些微小的区别。

2、混合开发

React Native代码开发的模块与原生代码开发的模块可以双向通信、无缝衔接;

React Native

macOS和Android

brew install node brew install watchman

# 使用nrm工具切换淘宝源 npx nrm use taobao

# 如果之后需要切换回官方源可使用 npx nrm use npm

npm install -g yarn

Java Development Kit y已经安装

Android 开发环境

已经安装

安装 Android SDK

在 SDK Manager 中选择”SDK Platforms”选项卡,然后在右下角勾选”Show Package Details”。展开Android 10 (Q)选项,确保勾选了下面这些组件(重申你必须使用稳定的翻墙工具,否则可能都看不到这个界面):

Android SDK Platform 29 Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

必须选择这上面的两个安装包。我初始化RN遇到很多怪异问题,就是因为没有安装这个两个东西。遇到的问题有:

error Failed to install the app. Make sure you have the Android development environment set up:

Run Configuration Error: react-native is not specified

我还修改过:/Users/cg/.gradle/gradle.properties,将里面的关于配置的内容注释掉。

我还设置了WebStorm的代理。

我不确定后两项是不是必须的。

配置 ANDROID_HOME 环境变量

在 ~/.bash_profile 中增加下面的内容:

# 如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。 export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools export PATH=$PATH:$ANDROID_HOME/emulator

使用echo $0命令查看你所使用的 shell。

创建新项目

npx react-native init AwesomeProject

编译并运行 React Native 应用

cd AwesomeProject

yarn android

# 或者 yarn react-native run-android

可以尝试阿里云提供的maven 镜像,将android/build.gradle中的jcenter()和google()分别替换为maven { url ‘https://maven.aliyun.com/repository/jcenter’ }和maven { url ‘https://maven.aliyun.com/repository/google’ }(注意有多处需要替换)。

常用命令

查看当前react native的版本号

react-native –version

chugangdeMacBook-Pro:AwesomeProject cg$ react-native –version react-native-cli: 2.0.1 react-native: 0.63.3

安装

官方教程:https://github.com/react-native-image-picker/react-native-image-picker/blob/master/docs/Install.md

Add the following lines to android/settings.gradle:

include ‘:react-native-image-picker’ project(‘:react-native-image-picker’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-image-picker/android’)

Add the implementation line to the dependencies in android/app/build.gradle:

dependencies {

implementation project(‘:react-native-image-picker’)

}

Add the import and link the package in MainApplication.java:

import com.imagepicker.ImagePickerPackage; // <– add this import

public class MainApplication extends Application implements ReactApplication {

@Override protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(

new MainReactPackage(), new ImagePickerPackage(), // <– add this line // OR if you want to customize dialog style new ImagePickerPackage(R.style.my_dialog_style)

);

}

}

Android Add the required permissions in AndroidManifest.xml:

<uses-permission android:name=”android.permission.CAMERA” /> <uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE”/>

Customization settings of dialog android/app/res/values/themes.xml (android/app/res/values/style.xml is a valid path as well):

/Users/cg/data/www/cg/AwesomeProject/android/app/src/main/res/values/styles.xml

<style name=”DefaultExplainingPermissionsTheme” parent=”Theme.AppCompat.Light.Dialog.Alert”>

<!– Used for the buttons –> <item name=”colorAccent”>#000000</item>

<!– Used for the title and text –> <item name=”android:textColorPrimary”>#000000</item>

<!– Used for the background –> <item name=”android:background”>#000000</item>

</style>

/Users/cg/data/www/cg/AwesomeProject/android/app/src/main/AndroidManifest.xml

<uses-permission android:name=”android.permission.CAMERA” /> <uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE”/>

react-native link react-native-image-picker

yarn add react-native-image-picker

登录框实现

import React, { Component } from ‘react’; import {

AppRegistry, Image, StyleSheet, Text, TextInput, Alert,//简单的JS弹出框 TouchableOpacity, Dimensions,//获取屏幕宽高 View

} from ‘react-native’;

var width = Dimensions.get(‘window’).width;//得到屏幕宽度

class LoginComponent extends Component {

//构造函数 constructor(props) {

super(props); //两个状态用户输入框文本,密码框文本 this.state = {user_text: ‘’,pass_text: ‘’};

} //点击事件函数 onButtonPress () {

Alert.alert(‘用户输入信息’,’您输入的手机号/魅族账号为:’+this.state.user_text+’,输入的密码为:’+this.state.pass_text);

};

render() {
return (
<View style={LoginStyles.container}>
<Image source={require(‘./img/flyme5_logo.png’)}//项目中的图片

style={LoginStyles.logoImg}/>

<TextInput placeholder=”手机号/魅族账号”

underlineColorAndroid={‘transparent’}//去掉下划线 style={LoginStyles.username} //将文本写入state onChangeText={(user_text) => this.setState({user_text})}/>

<TextInput placeholder=”密码”

secureTextEntry={true}//隐藏输入内容 underlineColorAndroid={‘transparent’} style={LoginStyles.username} onChangeText={(pass_text) => this.setState({pass_text})}/>

<TouchableOpacity

activeOpacity={0.5}//点击时的透明度 style={LoginStyles.login} //点击事件,要记得绑定 onPress={this.onButtonPress.bind(this)}>

<Text style={{fontSize:15,color:’white’,fontWeight:’bold’}}>

登录

</Text>

</TouchableOpacity>

</View>

);

}

};

const LoginStyles = StyleSheet.create({
container:{

flex: 1, flexDirection: ‘column’, justifyContent: ‘center’

}, logoImg: {

width:100, height:108, alignSelf:’center’,//设置子控件的位置居中 marginBottom:60

}, username: {

width:width-32,//居中,宽度为屏幕宽度-32,这样左右都有16的边距 borderRadius: 20,//输入框边界圆角度数 borderColor: ‘skyblue’,//输入框边界颜色 marginBottom:16, paddingLeft:10,//这里是为了在圆角之后输入 padding:0,//去掉Android默认的padding borderWidth: 1, alignSelf:’center’//自身居中

}, login :{

width:width-32, height:35, borderRadius: 20,//按钮圆角 alignSelf:’center’, backgroundColor:’skyblue’, marginTop:20, justifyContent:’center’, alignItems:’center’//显示Text组件居中

},

});

AppRegistry.registerComponent(‘AwesomeProject’, () => ButtonTest);

来自:

https://blog.csdn.net/aiynmimi/article/details/75669482

不错的文章。

安装调试工具

yarn add react-devtools

常用语法

使用本地图片

<Image

source={require(“./logo.png”)} style={{

aspectRatio: 6, resizeMode: “contain”

}}

/>

使用三目运算符

{
this.state.loading === true ?
(
<View style={styles.spinner}>

<ActivityIndicator size=”large” color=”#0000ff” />

</View>

)(
<ScrollView style={{ flex: 1 }}>
{this.state.contacts.map(contact => {
return (
<ListItem
leftElement={
<Avatar
img={
contact.hasThumbnail

? { uri: contact.thumbnailPath } : undefined

} placeholder={getAvatarInitials(

${contact.givenName} ${contact.familyName}

)} width={40} height={40}

/>

} key={contact.recordID} title={${contact.givenName} ${contact.familyName}} description={${contact.company}} onPress={() => this.onPressContact(contact)} onDelete={() =>

Contacts.deleteContact(contact).then(() => {

this.loadContacts();

})

}

/>

);

})}

</ScrollView>

)

}

他山之石

https://www.cnblogs.com/xiaoyan2017/p/8912054.html

别人做的高仿微信,瞬间觉得我的仿制品太难看了。