ReactNative实战项目演练

【叩丁狼教育】ReactNative实战项目演练-自学必备

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

P1 01-移动端app开发方式介绍

大致可以分为这3种：
native app（原生app：iOS或安卓）
web app
hybrid app（混合app）

P2 02-RN简介
P3 03-搭建RN环境前的说明
P4 04-python环境的安装
P5 05-java环境的安装
P6 06-android studio的安装

P7 07-android模拟器genymotion和虛拟盒子的安装

Genymotion

P8 08-genymotion账号注册
P9 09-登录genymotion下载虚拟设备
P10 10-启动虚拟机报错问题的解决

P11 11-react-native脚手架安装
P12 12-创建项目和启动项目
P13 01-复习回顾
P14 02-再次启动项目
P15 03-修改代码和更新界面
P16 04-自定义组件1
P17 05-自定义组件2（样式代码）
P18 06-View组件和初步认识ScrollView组件

P19 07-获取屏幕的宽高和像素比

面试题：为什么获取屏幕分辨率，为什么获取的屏幕高度和真实高度不一致？
Dimensions.get（"window"）获取的是屏幕可用范围的宽高（不是绝对宽高）

/**
 * 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,
  Dimensions
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';
const {width,height,scale}=Dimensions.get('window')

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>屏幕的宽度是：{width}</Text>
          <Text>屏幕的高度是：{height}</Text>
          <Text>屏幕的像素比是：{scale}</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  
});

export default App;

P20 08-两个小练习题

height:1/scale, 一条线

因为Button样式本身有局限性。TouchableOpacity组件可以自由定义组件样式。

P21 09-初步回忆flex布局
P22 10-早上回顾
P23 11-flex布局1
P24 12-flex布局2
P25 13-flex练习1
P26 14-flex练习2
P27 15-Button按钮组件
P28 16-TouchableOpacity自定义按钮组件

P29 17-Image组件

/**
 * 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,
  Dimensions
} from 'react-native';
import logo from './assets/img/code.png'

import {Colors} from 'react-native/Libraries/NewAppScreen';
const {width,height,scale}=Dimensions.get('window')

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>
          <Image style={{width:100,height:100}} source={logo}></Image>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  
});

export default App;

P30 18-WebView组件

yarn add react-native-webview

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

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


function App(): React.JSX.Element {
  return (
    <WebView source={{uri:'https://m.jd.com'}} style={{flex: 1}} ></WebView>
  )
}

const styles = StyleSheet.create({
  
});

export default App;

P31 19-复习总结
P32 01-复习回顾
P33 02-图片的另一种引入方式
川 P34_03-图片的另一种引入方式（解决）
P35 04-FlatList组件的使用
P36 05-图片展示案例01
P37 06-图片展示案例02

P38 07-TextInput组件

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

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


function App(): React.JSX.Element {
  return (
    <View>
      <TextInput 
        placeholder='place input'
        placeholderTextColor={'#ccc'}
        maxLength={8}
        underlineColorAndroid={'transparent'}
        secureTextEntry={true}
      ></TextInput>
    </View>
  )
}

const styles = StyleSheet.create({
  
});

export default App;

P39 08-登录界面的实现01
P40 09-登录界面的实现02

P41 10-ScrollView的使用
P42 11-图片文字展示案例

P43 12-适配其他分辨率的做法

八、适配其他分辨率的做法
在上一天的学习中，我们了解到，每种机型的Dimensiohs宽度、高度、像素比是有可能不一样的，即在我们现在使用的360宽度，在其他机型上就不一定完全适配。
如果出现不适配的情况，可以使用以下解决方案：
比如，我们要在1080（360 x 3）像素的机型上书写340宽度的盒子，则其他机型（width x scale）要书写多少宽度？
推导过程如下：

340/360x3 = ?/width*scale

340/360x3 = ?/width*scale  340UI尺寸
?=width*scale*340/1000
?=width*scale/1000*340

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

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

//适应所有屏幕
let {width,scale}=Dimensions.get('window') // 1
let wuli=width*scale/1000 //2

function App(): React.JSX.Element {
  return (
    <View style={styles.container}>
      
    </View>
  )
}

const styles = StyleSheet.create({
  container:{
    width:100*wuli, //3
    height:100*wuli,
    backgroundColor:'skyblue'
  }
});

export default App;

P44 13-复习总结
P45 01-复习回顾

P46 02-创建项目

: LifeServices

https://gitee.com/lpjeremy/LifeServices/tree/master

P47 03-项目目录的搭建工作

P48 04-启动图片的展示

LifeServices> android>app> src> main> res>drawable 放图片

<Image width={100} height={100} source={{uri:'logo'}}></Image>

还有请缓存

P49 05-实现启动界面跳转到导航界面

P50 06-导航的初步实现

我们使用React Navigation来实现导航效果。React Navigation是Facebook，Expo和React社区的开发者们合作的结果：它取代并改进了React Native生态系统中的多个导航库。

reactnavigation.org.cn

npm install --save react-navigation

P51 07-导航的初步设置
P52 08-早上知识点回顾
P53 09-导航中icon的展示
P54 10-导航的配置项的设置
P55 11-美食顶部开始
P56 12-美食顶部完成
P57 13-美食菜单开始
P58 14-美食菜单数据填充
P59 15-复习总结
P60 01-复习回顾

P61 02-美食菜单小圆点完成
P62 03-超值特惠开始
P63 04-超值特惠内容完成
P64 05-周边美食布局完成

P65 06-修改手机的GPS的经纬度的注意事项

P66 07-通过高德平台如何获取指定地址所对...
P67 08-申请一个key可以在项目中使用api
P68 09-获取周边的美食新启
P69 10-在项目中请求周边美食数据
P70 11-把周边美食数据填充到界面中

P71 01-复习回顾

P72 02-使用定时器实现自动轮播效果

用 scrollView +定时器 做轮播图

P73 03-实现无缝版的轮播

P74 04-react-native-swiper安装和基本使用

npm i react-native-swiper --save

P75 05-使用react-native-swiper实现自定义的

P76 06-stackNavigator的基本使用

stackNavigator相当返回

tabNavigator tabbar

DrawerNavigator 抽屉导航 响应式

P77 07-stackNavigator的传参使用和返回
P78 08-上午复习
P79 09-stackNavigator的一些样式配置
P80 10-DrawerNavigator的基本用法

P81 11-DrawerNavigator的核心用法
P82 12-DrawerNavigator的配置和自定义抽..
P83 13-DrawerNavigator从自定义抽屉中传递..
P84 14-使用FlatList组件实现下拉刷新

P85 15-使用FlatList组件实现滑动到底部加载...

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

P86 16-AsyncStorage存储

AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App 来说是全局性的。可用来代替LocalStorage，

npm i @react-native-async-storage/async-storage

AsyncStorage.setItem(key,value,callback)
AsyncStorage.getItem(key,callback)
AsyncStorage.removeItem(key,callback)

定位65-高德 轮播图72 导航76-50-80
posted @ 2024-12-14 13:25  KooTeam  阅读(90)  评论(0)    收藏  举报