React Native のいくつかの利点について簡単に説明しましょう
1. クロスプラットフォーム
2. 開発コストが低い
3. 高性能
4.動的更新のサポート
React Native を使用する利点は何ですか? それは、一連のコードを Android と iOS の両方に適用できるため、コードの再利用率が向上することです。
開発環境を構築する
1. 注.js をインストールする必要があります
2. React Native コマンド ライン ツール React Native Command Line をインストールする必要があります
3. Android 開発には Android Studio / iOS 開発には X Code
Windows プラットフォーム上に React Native 開発環境を構築する
最初に Node.js をインストールします https://nodejs.org/en/download
インストールチュートリアルは次のとおりです
https://www.runoob.com/nodejs/nodejs-install-setup.html
インストールが成功したら、React Native コマンド ライン ツールをインストールします。
npm install -g 反応ネイティブ-cli
RN でサポートされているコマンドを表示するには、react-native --help コマンドを使用します。
反応ネイティブのアップグレードは Android iOS ライブラリをロードします
//终端的显示
Microsoft Windows [版本 10.0.17134.1]
(c) 2018 Microsoft Corporation。保留所有权利。
//查看版本 查看node.js是否安卓成功
C:\Users\Administrator>npm -v
6.13.4
//安装react native 的环境
C:\Users\Administrator>npm install -g react-native-cli
C:\Users\Administrator\AppData\Roaming\npm\react-native ->
C:\Users\Administrator\AppData\Roaming\npm\node_modules\react-native-cli\index.js
+ [email protected]
added 72 packages from 25 contributors in 66.181sその後、Android Studioをインストールします
最初の RN プロジェクトの作成
ターミナルを開き、react-native init + プロジェクト名を入力します。
作成後のディレクトリは次のようになります
Android スタジオを開き、ロード ディレクトリの下の Android ディレクトリを開きます。
jsを読み込むための設定です
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
return packages;
}
//这里是加载我们的运行的第一个头文件
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
initializeFlipper(this); // Remove this line if you don't want Flipper enabled
}
/**
* Loads Flipper in React Native templates.
*
* @param context
*/
private static void initializeFlipper(Context context) {
if (BuildConfig.DEBUG) {
try {
/*
We use reflection here to pick up the class that initializes Flipper,
since Flipper library is not available in release mode
*/
Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
}
}
ターミナルを開いてデバイスが接続されていることを確認し、プロジェクトのディレクトリに移動して、npm install を実行します。
React-native run-android を実行すると、デバイスにインストールできます
現時点で、RN プロジェクトの開発を開始できます。
まず、App.js ファイルを見つけます。
import React from 'react';
import{View,Text,StyleSheet} from 'react-native';
const App = () =>{
return(
<View style={Styles.container}>
//编写我们的布局，嵌套各种布局
</ZiDingYi>
</View>
);
};
//定义每个组件的样式
const Styles = StyleSheet.create(
{
container:{
flex: 1,
alignItems:'center',
}
});
//写完不要忘记导出
export default App
上記の </ZiDingYi> タグでは、カスタムの組み合わせビューを作成してエクスポートし、App.js で作成した ZiDingYi をインポートできます。たとえば、このページが App をエクスポートする場合、他のページにもエクスポートできます。アプリのこのページを使用する
一般的に使用されるコントロールのプロパティは、サイズや色の設定など、コントロールのスタイルを設定するときに、プロパティで直接設定できます。
<View style={Styles.container}>
たとえば、このコード行ではビューを定義し、そのスタイルはスタイルで作成したコンテナ スタイルです。これにより、コントロールにさまざまなスタイルを設定して、作成したいページを完成させることができます。
FlexBox レイアウトの共通プロパティ
//flex 控制权重的，类似安卓里 LineaLayout 中的weight, 但是在这里有点不同，在RN当中，
//这个是表示充满父容器。如果是根节点，那么就会充满整个屏幕。
//flexDirection 子集标签排列方向
//justifyContent 设置横轴的对其方式
//alignItems 设置竖轴的对其方式
さらに詳しく知りたい場合は、RN の中国語 API: https://reactnative.cn/docs/view/をご覧ください。
次に、ネットワーク リクエストを記述し、各アイテムのトーストをクリックすると、アイテムに画像とテキストが混在します。主な効果は次のとおりです。
import React, { Component } from 'react';
import{View,Text,FlatList,Dimensions,
TouchableOpacity,ToastAndroid,Image} from 'react-native';
//获取屏幕的宽高
var width = Dimensions.get('window').width
var height= Dimensions.get('window').height
var url ="http://www.qubaobei.com/ios/cf/dish_list.php?stage_id=1&limit=10&page=1"
class App extends Component{
//构造
constructor(props){
super(props);
//定义state，当state改变时，会重新调用我们的render函数重新绘制我们的View
//举个例子就是我们给我们的一个Text组件赋一个变量，当这个变量值改变时就会重新绘制我们的Text从而动态改变Text显示的内容
this.state = {
datas : []
}
}
//Rn的生命周期，页面创建时调用
componentDidMount(){
this.loadData()
}
//网络请求我们的数据
loadData(){
//调试的时候可以打印
console.warn("asdasdasd")
//加载我们的url
fetch(url)
.then((response) => response.json())
.then((responseJson) => {
//responseJson就是我们转换成的json对象可以直接调用这个对象中的属性，也就是json对象中的属性
console.warn(responseJson.data)
//更新我们的state，改变页面显示的数据
this.setState({
datas:responseJson.data
})
console.warn(responseJson)
})
//当请求失败的时候我们在这里处理
.catch((error) => {
console.error("cuowu65465464");
});
}
//render函数就是绘制我们的View，他也只能返回一个View
render(){
return(
<View style = {
{flex:1}}>
{/* 类似我们的ListView */}
<FlatList
// 设置数据源
data = {this.state.datas}
renderItem={({item}) =>
// 在这里我们可以通过Index来判断返回我们想要的View，从而实现了多布局
<TouchableOpacity onPress = {()=>{ToastAndroid.show(item.title,ToastAndroid.SHORT)}}>
<View style={
{flexDirection:'row',backgroundColor:"#f34f56",margin:2}}>
<Image source = {
{uri:item.pic}} style = {
{width:50,height:50,backgroundColor:"#f00",borderRadius:45}}></Image>
<Text style = {
{textAlign:'center',margin:1,flex:1,textAlign:'center'}}>
{item.title}
</Text>
</View>
</TouchableOpacity>}/>
</View>
)
}
}
//导出
export default App