3小时入门ReactNative教程

https://www.bilibili.com/video/BV1Eg4y16735

P1 RN安装01 androidStudio 和环境变量配置-Re

安装androidStudio nrm

npx nrm use taobao

nrm ls

P2 RN安装02-安装nrm-使用淘宝源-ReactNative

P3 RN安装03-启动项目-ReactNative

https://blog.csdn.net/wzr514420887/article/details/132321915

npx install react-native-cli -g

react-native-cli: 2.0.1

新版安装不一样 https://reactnative.cn/docs/environment-setup

react-native init myapp

npx react-native init AwesomeProject

逍遥模拟器 adb connect 127.0.0.1:21503

adb devices

npx react-native run-android

a

项目/android/build.gradle
repositories:{
        maven{
            url 'http://maven.aliyun.com/nexus/content/groups/public'
        }
    }

配置gradle https://blog.csdn.net/weixin_44843569/article/details/120873183

gradle 下载慢 https://blog.csdn.net/liyu_ya/article/details/129403811

npx react-native@latest init AwesomeProject

yarn android

buildscript {
    ext {
        buildToolsVersion = "34.0.0"
        minSdkVersion = 23
        compileSdkVersion = 34
        targetSdkVersion = 34
        ndkVersion = "26.1.10909125"
        kotlinVersion = "1.9.22"
    }
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        // google()
        // mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
    }
}

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        maven {
            url 'https://maven.aliyun.com/repository/jcenter'
            content {
                excludeGroup "com.facebook.react"
            }
        }
//         mavenCentral {
//             // We don't want to fetch react-native from Maven Central as there are
//             // older versions over there.
//             content {
//                 excludeGroup "com.facebook.react"
//             }
//         }
        maven { url 'https://maven.aliyun.com/repository/google' }
//         google()
        maven { url 'https://www.jitpack.io' }
    }
}
apply plugin: "com.facebook.react.rootproject"

android -> gradle -> wrapper -> gradle-wrapper.properties
https://www.cnblogs.com/zijuan/p/6382984.html
https://www.cnblogs.com/yahue/p/React_Native_Android_gradle.html

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-all.zip
networkTimeout=10000
validateDistributionUrl=true
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

distributionUrl=file\:///d:/gradle/gradle-8.6-all.zip

配置一样的gradle

注意办法 https://blog.csdn.net/qq_44094296/article/details/135682127

https://blog.csdn.net/qq_27151401/article/details/128687236

https://juejin.cn/post/7257787885863190583

android ->build.gradle

buildscript {
    ext {
        buildToolsVersion = "34.0.0"
        minSdkVersion = 23
        compileSdkVersion = 34
        targetSdkVersion = 34
        ndkVersion = "26.1.10909125"
        kotlinVersion = "1.9.22"
    }
    repositories {
        maven { url 'https://mirrors.cloud.tencent.com/gradle/' }
        maven{ url 'https://maven.aliyun.com/repository/google'}
        // maven{
        //     allowInsecureProtocol true
        //     url "https://maven.aliyun.com/repository/public"
        // }

        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
    }
}
allprojects {
    repositories {
        maven{ url 'https://maven.aliyun.com/repository/google'} //重点关注这一行
        google()
        jcenter()
    }
}

apply plugin: "com.facebook.react.rootproject"

react-native -v 13.6.8

java17 gradle7.3 项目用gradle8.8 path-gradle-8.8 react-native13.6.8/latest

对应版本https://docs.gradle.org/current/userguide/compatibility.html

P4 RN-04-05-View和Text-ReactNative

reactnative.cn

<View>
    <Text>hello react native</Text>
</View>
import {
  SafeAreaView,   //安全 刘海屏
  ScrollView,     //滚动内容区域
  StatusBar,      //状态栏
  StyleSheet,     //样式表
  Text,           //文本
  useColorScheme,
  View,           //块 视图
} from 'react-native';

P5 RN-06-项目结构-ReactNative

P6 RN-07-button与样式-ReactNative

App.tsx
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {
  SafeAreaView,   //安全 刘海屏
  ScrollView,     //滚动内容区域
  StatusBar,      //状态栏
  StyleSheet,     //样式表
  Text,           //文本
  useColorScheme,
  View,           //块 视图
  Button          //按钮
} from 'react-native';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';


function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        >
        <View>
          <Text>hello react native</Text>
        </View>
        <View style={styles.btn}>
          <Button onPress={()=>alert('520')} title='click' color={'red'}></Button>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  center:{
    justifyContent:'center',
    alignContent:'center'
  },
  btn:{
    width:100
  }
});

export default App;

P7 RN-08-弹出框组件-ReactNative

Alert

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {
  SafeAreaView,   //安全 刘海屏
  ScrollView,     //滚动内容区域
  StatusBar,      //状态栏
  StyleSheet,     //样式表
  Text,           //文本
  useColorScheme,
  View,           //块 视图
  Button,          //按钮
  Alert
} from 'react-native';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';


function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        >
        <View>
          <Text>hello react native</Text>
        </View>
        <View style={styles.btn}>
          <Button onPress={()=>alert('520')} title='click' color={'red'}></Button>
        </View>
        <View style={styles.btn}>
          <Button onPress={()=>Alert.alert('title','content')} title='click' color={'blue'}></Button>
        </View>
        <View style={styles.center}>
          <Button 
          onPress={()=>Alert.alert('title','content',[
            {text:'no',onPress:()=>alert('no')},
            {text:'ok',onPress:()=>alert('ok')},
            {text:'cancel',onPress:()=>alert('cancel')}
          ])} 
          title='可以吗' color={'blue'}
          ></Button>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  center:{
    justifyContent:'center',
    alignItems:'center'
  },
  btn:{
    width:100
  }
});

export default App;

P8 RN-09-10-图片与文本框组件-ReactNative

单位tp

图片和文本才能添加事件引入TouchableOpacity，/触摸半透明组件才可以

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, { useState } from 'react';
import {
  SafeAreaView, //安全 刘海屏
  ScrollView, //滚动内容区域
  StatusBar, //状态栏
  StyleSheet, //样式表
  useColorScheme,
  View, //块 视图
  Image,
  TouchableOpacity,
  Text,
  TextInput
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };
  let [msg,setMsg]=useState('hello react native')
  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <View>
          <Text>{msg}</Text>
          <TextInput onChangeText={(text)=>setMsg(text)} value={msg}></TextInput>
        </View>
        <View style={styles.center}>
          <TouchableOpacity onPress={()=>alert('img')}>
            <Image style={{width:100,height:100}} source={require('./assets/img/code.png')}></Image>
          </TouchableOpacity>
          <Image style={{width:459,height:816}} source={{uri:'https://ts1.cn.mm.bing.net/th/id/R-C.40b20d7f957acd21816d8f2f4b6b281c?rik=t84hzwSRHZl76Q&riu=http%3a%2f%2fimg.keaitupian.cn%2fuploads%2f2020%2f07%2f27%2fvtba42j0ldr.jpg&ehk=koTk1dC89ASqZg8odeoC%2fVMcuv9IEfaf7JR0heevIpE%3d&risl=&pid=ImgRaw&r=0'}}></Image>
        </View>
        
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  center:{
    justifyContent:'center',
    alignItems:'center'
  },
  btn:{
    width:100
  }
});

export default App;

P9 RN-11-RN中的css-ReactNative

react Native css没有百分比数值，不用单位默认是pt，默认flex弹性布局，布局方向默认垂直布局

<Text style={[styles.textSize,styles.textColor]}>{msg}</Text>

P10 RN-12-Ajax请求-ReactNative

http://www.endata.com.cn/API/GetData.ashx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, { useEffect, useState } from 'react';
import {
  SafeAreaView, //安全 刘海屏
  ScrollView, //滚动内容区域
  StatusBar, //状态栏
  StyleSheet, //样式表
  useColorScheme,
  View, //块 视图
  Image,
  TouchableOpacity,
  Text,
  TextInput
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };
  let [msg,setMsg]=useState('hello react native')
  let [movies,setMovies]=useState([])
  useEffect(()=>{
    let get=()=>{
      fetch("http://geek.itheima.net/v1_0/channels").then(res=>res.json()).then(res=>{
        console.log(res.data.channels)
        setMovies(res.data.channels)
      })
    }
    get()
  },[])

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        {
          movies.map(item=>{
            return <Text>{item.name}</Text>
          })
        }
        <View>
          <Text style={[styles.textSize,styles.textColor]}>{msg}</Text>
          <TextInput onChangeText={(text)=>setMsg(text)} value={msg}></TextInput>
        </View>
        <View style={styles.center}>
          <TouchableOpacity onPress={()=>alert('img')}>
            <Image style={{width:100,height:100}} source={require('./assets/img/code.png')}></Image>
          </TouchableOpacity>
          <Image style={{width:459,height:816}} source={{uri:'https://ts1.cn.mm.bing.net/th/id/R-C.40b20d7f957acd21816d8f2f4b6b281c?rik=t84hzwSRHZl76Q&riu=http%3a%2f%2fimg.keaitupian.cn%2fuploads%2f2020%2f07%2f27%2fvtba42j0ldr.jpg&ehk=koTk1dC89ASqZg8odeoC%2fVMcuv9IEfaf7JR0heevIpE%3d&risl=&pid=ImgRaw&r=0'}}></Image>
        </View>
        
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  center:{
    justifyContent:'center',
    alignItems:'center'
  },
  textSize:{
    fontSize:32,
  },
  textColor:{
    color:'skyblue'
  }
});

export default App;

P11 RN-13-flatlist-ReactNative

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, { useEffect, useState } from 'react';
import {
  SafeAreaView, //安全 刘海屏
  ScrollView, //滚动内容区域
  StatusBar, //状态栏
  StyleSheet, //样式表
  useColorScheme,
  View, //块 视图
  Image,
  TouchableOpacity,
  Text,
  TextInput,
  FlatList
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };
  let [msg,setMsg]=useState('hello react native')
  let [movies,setMovies]=useState([])
  useEffect(()=>{
    let get=()=>{
      fetch("http://geek.itheima.net/v1_0/channels").then(res=>res.json()).then(res=>{
        console.log(res.data.channels)
        setMovies(res.data.channels)
      })
    }
    get()
  },[])

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        {/* {
          movies.map(item=>{
            return <Text>{item.name}</Text>
          })
        } */}
        <FlatList
          keyExtractor={item=>item.id}
          data={movies}
          numColumns={2}
          columnWrapperStyle={styles.center}
          renderItem={({item})=><Text key={item.id}>{item.name}</Text>}
        ></FlatList>
        <View>
          <Text style={[styles.textSize,styles.textColor]}>{msg}</Text>
          <TextInput onChangeText={(text)=>setMsg(text)} value={msg}></TextInput>
        </View>
        <View style={styles.center}>
          <TouchableOpacity onPress={()=>alert('img')}>
            <Image style={{width:100,height:100}} source={require('./assets/img/code.png')}></Image>
          </TouchableOpacity>
          <Image style={{width:459,height:816}} source={{uri:'https://ts1.cn.mm.bing.net/th/id/R-C.40b20d7f957acd21816d8f2f4b6b281c?rik=t84hzwSRHZl76Q&riu=http%3a%2f%2fimg.keaitupian.cn%2fuploads%2f2020%2f07%2f27%2fvtba42j0ldr.jpg&ehk=koTk1dC89ASqZg8odeoC%2fVMcuv9IEfaf7JR0heevIpE%3d&risl=&pid=ImgRaw&r=0'}}></Image>
        </View>
        
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  center:{
    justifyContent:'center',
    alignItems:'center'
  },
  textSize:{
    fontSize:32,
  },
  textColor:{
    color:'skyblue'
  }
});

export default App;

P12 RN14-flatList下拉刷新

 <FlatList
          refreshing={true} //刷新标志
          onRefresh={()=>{}} //刷新回调
          keyExtractor={item=>item.id}
          data={movies}
          numColumns={2}
          columnWrapperStyle={styles.center}
          renderItem={({item})=><Text key={item.id}>{item.name}</Text>}
        ></FlatList>

P13 RN15-上拉触底-ReactNative

<FlatList
          refreshing={true} //上啦刷新标志
          onRefresh={()=>{}} //上啦刷新回调
          onEndReached={()={}} //触底刷新加载
          keyExtractor={item=>item.id}
          data={movies}
          numColumns={2}
          columnWrapperStyle={styles.center}
          renderItem={({item})=><Text key={item.id}>{item.name}</Text>}
        ></FlatList>

书

https://erhutime.gitbooks.io/react-native/content/chapter1.html

打包apk ios

https://reactnative.cn/docs/signed-apk-android

https://blog.csdn.net/ych1274816963/article/details/120967009

run ios https://blog.csdn.net/lxyoucan/article/details/108334465

Ant Design Mobile RN of React

https://rn.mobile.ant.design/docs/react/introduce-cn

其他ui https://blog.csdn.net/wayne214/article/details/84240798

https://juejin.cn/post/7170606687835914271

最后用下antdx 打包apk ./gradlew assembleRelease

连接iphone开发麻烦x 打包ios要macx

打包也慢

https://juejin.cn/post/7263035160622317626

生成的 APK 文件位于android/app/build/outputs/apk/release/app-release.apk

https://reactnative.cn/docs/signed-apk-android

posted @ 2024-12-14 13:25 KooTeam 阅读(125) 评论(0) 收藏举报

刷新页面返回顶部

KooTeam

Knowledge makes humble,ignorant makes proud!

3小时入门ReactNative教程

3小时入门ReactNative教程

P1 RN安装01 androidStudio 和环境变量配置-Re

P3 RN安装03-启动项目-ReactNative

P4 RN-04-05-View和Text-ReactNative

P6 RN-07-button与样式-ReactNative

P7 RN-08-弹出框组件-ReactNative

P8 RN-09-10-图片与文本框组件-ReactNative

P9 RN-11-RN中的css-ReactNative

P10 RN-12-Ajax请求-ReactNative

P11 RN-13-flatlist-ReactNative

P12 RN14-flatList下拉刷新

P13 RN15-上拉触底-ReactNative

书

打包apk ios

Ant Design Mobile RN of React

打包也慢

公告

KooTeam

Knowledge makes humble,ignorant makes proud!

3小时入门ReactNative教程

3小时入门ReactNative教程

P1 RN安装01 androidStudio 和 环境变量配置-Re

P3 RN安装03-启动项目-ReactNative

P4 RN-04-05-View和Text-ReactNative

P6 RN-07-button与样式-ReactNative

P7 RN-08-弹出框组件-ReactNative

P8 RN-09-10-图片与文本框组件-ReactNative

P9 RN-11-RN中的css-ReactNative

P10 RN-12-Ajax请求-ReactNative

P11 RN-13-flatlist-ReactNative

P12 RN14-flatList下拉刷新

P13 RN15-上拉触底-ReactNative

书

打包apk ios

Ant Design Mobile RN of React

打包也慢

公告

P1 RN安装01 androidStudio 和环境变量配置-Re