创建react native项目的笔记

这篇具有很好参考价值的文章主要介绍了创建react native项目的笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本项目适用于react native@0.72 react@18.2

重新下载 ruby

1.ruby环境必须是2.6.10版本以上(查看ruby版本 ruby -v)

brew reinstall ruby

2.进入vim编辑器
vim ~/.zshrc

3.配置
export PATH="/usr/local/opt/ruby/bin:$PATH"
export LDFLAGS="-L/usr/local/opt/ruby/lib"
export CPPFLAGS="-I/usr/local/opt/ruby/include"
export PKG_CONFIG_PATH="/usr/local/opt/ruby/lib/pkgconfig"

4.重新执行一下文件
source ~/.zshrc

安装 watchman

brew install watchman

安装 cocoapods

sudo gem install cocoapods
pod setup

安装 react native 项目

npx react-native@latest init <项目名称>

npx react-native run-ios
npx react-native run-android

创建好项目后安装 ios 依赖

1.第一步
进入ios文件夹
cd ios

2.第二步
bundle install

3.第三步
bundle exec pod install

运行项目打包ios

清除设备缓存

1.android
npx react-native start --reset-cache

2.ios
npx react-native start --reset-cache --reset-cache

清理构建缓存
rm -rf node_modules rm -f package-lock.json rm -f yarn.lock npm cache clean --force npm install

 cd ios
   rm -rf Pods
   rm -rf ~/Library/Developer/Xcode/DerivedData/*
   pod install

安装 android 依赖

cd android
./gradlew clean
cd ..
npx react-native run-android

生成发行 APK 包
./gradlew assembleRelease

链接 网易 mumu 模拟器

1.windows
adb connect 127.0.0.1:7555

2.mac
adb connect 127.0.0.1:5555

安装路由 Navigation

1.第一步
npm install @react-navigation/native

2.第二步
npm install react-native-screens react-native-safe-area-context

react-native-safe-area-context:提供了处理安全区域(Safe Area)的能力。安全区域是指屏幕上不受刘海屏、圆角等系统元素遮挡的区域

在App.jsx文件中引入
(NavigationContainer是一个组件,用于管理我们的导航树并包含导航状态。
这个组件必须包裹所有的导航器结构。通常,我们会在应用程序的根部渲染这个组件,这通常是从App.js导出的组件)
import {NavigationContainer} from '@react-navigation/native';
import {SafeAreaProvider} from 'react-native-safe-area-context';

安装的库是导航器的构建块和共享基础

3.第三步
npm install @react-navigation/native-stack

@react-navigation/native-stack依赖于react-native-screens和上面安装的其他库

在App.jsx文件中引入
import { createNativeStackNavigator } from '@react-navigation/native-stack';

4.安装底部tab切换
npm install @react-navigation/bottom-tabs

Tab.Navigator组件的screenOptions属性用于设置所有Tab.Screen组件的默认选项和样式。下面是一些常用的样式选项:
- tabBarStyle:设置标签栏的样式,可以包括backgroundColor、height、borderTopWidth等。
- tabBarActiveTintColor:设置活动标签的文本颜色。
- tabBarInactiveTintColor:设置非活动标签的文本颜色。
- tabBarLabelStyle:设置标签的文本样式,可以包括fontFamily、fontSize、fontWeight等。
- tabBarIconStyle:设置标签图标的样式,可以包括width、height、tintColor等。
- tabBarIndicatorStyle:设置标签栏指示器的样式,可以包括backgroundColor、height等。
- tabBarPressColor:设置标签栏被按下时的颜色。
- tabBarPressOpacity:设置标签栏被按下时的不透明度。

Tab.Screen组件的options属性用于设置选项,可以通过它来自定义标签页的外观和行为。下面是一些常用的设置项:
- tabBarLabel:标签页的显示文本。
- tabBarIcon:标签页的图标,可以使用图标组件或自定义图标。
- tabBarVisible:设置标签页是否可见。
- tabBarAccessibilityLabel:设置标签页的辅助功能标签。
- tabBarTestID:设置标签页的测试ID,用于测试目的。
- tabBarBadge:设置标签页的徽章,显示在图标上,并可以用于显示未读消息数等。
- tabBarBadgeStyle:设置标签页徽章的样式。
- tabBarButtonComponent:自定义标签页的按钮组件。
- tabBarOnPress:点击标签页时触发的回调函数。

页面之间的跳转逻辑

navigation.popToTop();//返回顶部页面

navigation.goBack(2,{

}); // 返回到第二个页面

navigation.navigate('Fourth',{

});//跳转到对应页面

import {useNavigation} from '@react-navigation/native';
const navigation = useNavigation();
navigation.navigate('List');

import { useRoute } from '@react-navigation/native';
const route = useRoute();
route.params

添加
npm install react-native-gesture-handler

自定义头部样式

1.headerStyle:
 一个应用于包裹标题的View的样式对象。如果在上面设置了backgroundColor,那么标题的颜色将为该颜色

- backgroundColor:标题栏的背景颜色。
- borderBottomColor:标题栏底部边框的颜色。
- borderBottomWidth:标题栏底部边框的宽度。
- height:标题栏的高度。


2.headerTintColor:
返回按钮和标题都使用此属性作为它们的颜色。在下面的示例中,我们将tintColor设置为白色(#fff),以使返回按钮和标题为白色。

- 颜色名称:您可以使用预定义的颜色名称,如"red"、"blue"、"green"等。
- 十六进制值:您可以使用十六进制颜色代码,如"#FF0000"代表红色。
- RGB值:您可以使用RGB值来指定颜色,如"rgb(255, 0, 0)"代表红色。

3.headerTitleStyle属性用于自定义标题的样式,可以设置以下样式属性:

- fontFamily:标题的字体族名称(如"Arial"、"Helvetica"等)。
- fontWeight:标题的字重(如"bold"、"normal"等)。
- fontSize:标题的字号大小。
- color:标题的颜色。
- textAlign:标题的对齐方式(如"left"、"center"、"right"等)。
- textTransform:标题的文本转换方式(如"uppercase"、"lowercase"等)。
- letterSpacing:标题的字间距。
- lineHeight:标题的行高。

判断不同设备平台代码示例

const refreshControl = Platform.select({
    ios: <RefreshControlIOS
           refreshing={refreshing}
           onRefresh={handleRefresh}
         />,
    android: <RefreshControl
                refreshing={refreshing}
                onRefresh={handleRefresh}
              />
});

安装 Axios

npm install axios

安装本地简单存储工具

1.第一步
npm install @react-native-async-storage/async-storage

2.第二步
导入库并使用AsyncStorage
import AsyncStorage from "@react-native-async-storage/async-storage";

// token模块
const TokenKey = 'windoentToken';
//存储数据
export const setToken = async value => {
  await AsyncStorage.setItem(TokenKey, value);
};

//获取数据
export const getToken = async () => {
  try {
    const value = await AsyncStorage.getItem(TokenKey);
    return value;
  } catch (error) {
    return null;
  }
};

//删除数据
export const removeToken = async () => {
  await AsyncStorage.removeItem(TokenKey);
};

安装轮播图

npm install react-native-swiper

安装 Toast 消息弹出框

1.安装
npm install --save react-native-toast-message

2.在App.jsx中注册全局
// App.jsx
import Toast from 'react-native-toast-message';

export function App(props) {
  return (
    <>
      {/* ... */}
      <Toast />
    </>
  );
}

3.组件中使用
import Toast from 'react-native-toast-message';
Toast.show({
  type: 'success',//`success`、`error`、`info`
  text1: 'Hello',
  text2: 'This is some something 👋'
});

公共信息确认框

1.在组件中引入
import ShowModal from '../../componets/ShowModel';

2.在组件中注册
<ShowModal ref={showModelRef} />

const showModelRef = useRef(null);
  const showMOdel = () => {
    showModelRef.current.show({
      title: '标题',
      content: '内容-加油',
      success: res => {
        console.log('[返回值-12]', res);
      },
    });
  };

安装线性渐变色

1.安装
npm install react-native-linear-gradient

2.使用
import LinearGradient from 'react-native-linear-gradient';
<LinearGradient
      colors={['#FFAA6B', '#FF5B23']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 0 }}
      style={{ flex: 1 }}
    >
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ color: 'white', fontSize: 24 }}>Hello, this is a gradient background!</Text>
      </View>
</LinearGradient>

安装富文本解析器

1.安装
npm install react-native-htmlview --save

2.使用
import HTMLView from 'react-native-htmlview';
render() {
    const htmlContent = `<p><a href="http://jsdf.co">&hearts; nice job!</a></p>`;

    return (
      <HTMLView
        value={htmlContent}
        stylesheet={styles}
      />
    );
  }

  const styles = StyleSheet.create({
  a: {
    fontWeight: '300',
    color: '#FF3366', // make links coloured pink
  },
});


npm install react-native-render-html

https://github.com/meliorence/react-native-render-html

安装下拉选择插件

React Native >= 0.60+
https://www.npmjs.com/package/react-native-wheel-pick
1.安装
npm install react-native-wheel-pick --save-dev --legacy-peer-deps
npm install @react-native-picker/picker --save-dev --legacy-peer-deps
npm install @react-native-community/datetimepicker --save-dev --legacy-peer-deps

2.安装日期
https://www.npmjs.com/package/react-native-date-picker?activeTab=readme
npm install react-native-date-picker --save

安装上传图片插件

https://github.com/react-native-image-picker/react-native-image-picker
1.安装
npm install react-native-image-picker -S

2.使用
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';

//点击上传图片
  const uploadHandle = async () => {
    const options = {
      mediaType: 'photo', //photo or video or mixed(launchCamera on Android does not support 'mixed').
      quality: 0.5,
      selectionLimit: 1,
    };
    const response = await launchImageLibrary(options);
    console.log('[]', response);
    if (response.didCancel) {
      console.log('User cancelled image picker');
    } else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    } else if (response.customButton) {
      console.log('User tapped custom button: ', response.customButton);
    } else {
      // Get image source
      const files = response.assets;
      const source = {
        type: files[0].type,
        uri: files[0].uri,
        name: files[0].fileName,
        fileSize: files[0].fileSize,
      };
      // Set image source
      console.log('[上传图片]', source);
    }
  };

把图片转成 base64 格式

1.安装
npm install react-native-fs --save

2.使用
import RNFS from 'react-native-fs';

RNFS.readFile(source.uri, 'base64').then(content => {
// 得到的结果就可以 传给接口了 ,如果想要在网页上预览效果不要忘记格式转换

console.log('[图片转换成功]', 'data:image/jpeg;base64,' + content);
          setQueryParams({
            ...queryParams,
            avatar: 'data:image/jpeg;base64,' + content,
          });
}).catch(err => {
          console.log('[图片读取失败]');
});

类似于小程序 onShow 生命周期

import {useFocusEffect} from '@react-navigation/native';
const [appStatus, setAppStatus] = useState(true);
useEffect(() => {
    console.log('[页面状态]', appStatus);
    if (appStatus) {
      getInitList();
    }
    return () => {
      // 在组件销毁时触发
    };
  }, [appStatus]);

  useFocusEffect(
    React.useCallback(() => {
      // 你的逻辑代码,每次页面显示都会执行
      console.log('页面显示');
      // ...
      return () => {
        // 可选的清理逻辑(页面隐藏时触发)
        console.log('页面隐藏');
        // ...
      };
    }, []),
  );

安装可拖动的组件

1.安装
npm install --save react-native-draggable-gridview

2.使用
import GridView from 'react-native-draggable-gridview'
const [data, setData] = useState(['1', '2', '3', '4', '5', '6'])

<GridView
    data={data}
    numColumns={3}
    renderItem={(item) => (
        <View style={{ flex: 1, margin: 1, justifyContent: 'center', backgroundColor: 'gray' }}>
        <Text style={{ textAlign: 'center' }}>{item}</Text>
        </View>
    )}
    onReleaseCell={(items) => setData(items)}
/>

安装二维码插件

https://www.npmjs.com/package/react-native-qrcode-svg

1.安装依赖
npm i -S react-native-svg react-native-qrcode-svg

2.使用
import QRCode from 'react-native-qrcode-svg';

<QRCode
                  size={150}
                  value={value}
                  backgroundColor="transparent"
                />

<QRCode
      value="Just some string value"
      logo={{uri: base64Logo}}
      logoSize={30}
      logoBackgroundColor='transparent'
    />

安装视频拍摄插件

https://github.com/mrousavy/react-native-vision-camera
1.安装
npm uninstall react-native-vision-camera

iOS平台上配置权限Info.plist
 <key>NSCameraUsageDescription</key>
   <string>Your description of why you need the camera</string>
   <key>NSMicrophoneUsageDescription</key>
   <string>Your description of why you need the microphone</string>


https://www.npmjs.com/package/react-native-camera
1.安装
npm install react-native-camera

Android:
android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<meta-data
    android:name="android.content.pm.ApplicationInfo#permission.MICROPHONE"
    android:value="Your microphone usage description" />

android/app/build.gradle:
android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
  }
}

iOS:
<key>NSCameraUsageDescription</key>
<string>Your own description of the purpose</string>
<key>NSMicrophoneUsageDescription</key>
<string>App需要使用麦克风来进行语音录制。</string>

安装阴影

1.安装
 npm install react-native-shadow --save

2.使用
import { Shadow } from 'react-native-shadow'
<Shadow style={styles.shadowStyle}>
     <View style={styles.contentStyle}>
       {/* 内容 */}
     </View>
   </Shadow>

   shadowStyle: {
       width: '100%',
       height: 200,
       shadowColor: '#000',
       shadowOffset: {
         width: 0,
         height: 2,
       },
       shadowOpacity: 0.3,
       shadowRadius: 4,
       elevation: 5, // 仅适用于Android
     },

把汉字转换成拼音

https://www.npmjs.com/package/pinyin
1.安装依赖
npm install pinyin --save

2.使用
const hanzi = '你好,xxx,gouping';
const pyArray = pinyin(hanzi, {
  style: pinyin.STYLE_NORMAL,
});

console.log(pyArray.join(' '));

获取当前的经纬度

1.安装
https://www.npmjs.com/package/react-native-geolocation-service
npm install react-native-geolocation-service

https://www.npmjs.com/package/@react-native-community/geolocation
npm install @react-native-community/geolocation

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<key>NSLocationWhenInUseUsageDescription</key>
<string>Your description</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Your description</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>Your description</string>


2.使用
import Geolocation from 'react-native-geolocation-service';

Geolocation.getCurrentPosition(
  position => {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log('经度:', longitude);
    console.log('纬度:', latitude);
  },
  error => {
    console.log('获取位置信息失败', error.message);
  },
  { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);

import Geolocation from '@react-native-community/geolocation';
Geolocation.requestAuthorization();
Geolocation.getCurrentPosition(
  position => {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log('经度:', longitude);
    console.log('纬度:', latitude);
  },
  error => {
    console.log('获取位置信息失败', error.message);
  },
  { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);


饼状图

https://www.npmjs.com/package/react-native-pie-chart
1.安装
npm i react-native-pie-chart

2.使用(You need to have react, react-native and react-native-svg as your app's dependencies.)
import PieChart from 'react-native-pie-chart'

const widthAndHeight = 250
const series = [123, 321, 123, 789, 537]
const sliceColor = ['#fbd203', '#ffb300', '#ff9100', '#ff6c00', '#ff3c00']

 <View style={styles.container}>
    <Text style={styles.title}>Basic</Text>
    <PieChart widthAndHeight={widthAndHeight} series={series} sliceColor={sliceColor} />
    <Text style={styles.title}>Doughnut</Text>
    <PieChart
      widthAndHeight={widthAndHeight}
      series={series}
      sliceColor={sliceColor}
      coverRadius={0.45}
      coverFill={'#FFF'}
    />
</View>

获取设备版本号

https://github.com/react-native-device-info/react-native-device-info
1.安装
npm install --save react-native-device-info

2.使用
import DeviceInfo from 'react-native-device-info';
const appVersion = DeviceInfo.getVersion();
console.log(appVersion);

react-native 项目中修改 Android 版本号

1.android/app/build.gradle
defaultConfig:{
  versionName "1.0.1"
}

苹果开发官网

https://developer.apple.com/account/resources/profiles/list

使用钥匙串访问-生成证书

react native 官网

1.中文:
https://reactnative.cn/docs/signed-apk-android

2.英文:
https://reactnative.dev/docs/linking

第三方登录

1.苹果登录
https://github.com/invertase/react-native-apple-authentication
安装依赖包:
npm install @invertase/react-native-apple-authentication --save

import { appleAuth, AppleButton } from '@invertase/react-native-apple-authentication';

<AppleButton
        buttonStyle={AppleButton.Style.WHITE}
        buttonType={AppleButton.Type.SIGN_IN}
        onPress={handleAppleLogin}
      />

const handleAppleLogin = async () => {
    try {
      const credential = await appleAuth.performRequest({
        requestedOperation: appleAuth.Operation.LOGIN,
        requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
      });
      // 使用credential进行登录操作
      console.log(credential);
      console.log('[授权码authorizationCode]', credential?.authorizationCode);
      console.log('[用户唯一标识符user identifier]', credential?.user);
      console.log('[身份令牌identityToken]', credential?.identityToken);
    } catch (error) {
      console.log(error);
    }
};

添加 app logo

1.需要一张1024*1024的图片,用第三方网站生成App logo
网站:https://icon.wuruihong.com/

##接入第三支付
https://open.weixin.qq.com/

配置URL Scheme
Info-->URL Types

1.支付宝

1.1.支付宝开放平台
https://open.alipay.com/

网站:https://www.npmjs.com/package/@uiw/react-native-alipay
npm i @uiw/react-native-alipay

import Alipay from '@uiw/react-native-alipay';

Alipay.setAlipayScheme('alipayxxxx');

const aliPay=async ()=> {
    // 支付宝端支付
    // payInfo 是后台拼接好的支付参数
    // return_url=
    const payInfo = 'app_id=xxxx&biz_content=%7B%22out_trade_no%22%3A%22dev01002%22%2C%22subject%22%3A%22%E6%B5%8B%E8%AF%95%E5%95%86%E5%93%8111%22%2C%22total_amount%22%3A%220.01%22%7D&charset=utf-8&format=JSON&method=alipay.trade.app.pay&notify_url=http%3A%2F%2F114.117.4.43%3A8088%2ForderApi%2Fnotify&return_url=alipay2021004124685712%3A%2F%2F&sign=En8N4yHPvjb9AcHlioGhsHx0mOcI19TMr9EshcDCIf63acqMAOFB2rMIKCgkO0flZ3U6MiAW9wioQq1ln1hEZMT1zO6IGeY2g9nF3dqHyuybpsA4qve2jmfZo%2B4vI1GW6sOAa2RG5nwssc8kuHdJgms1PDjNYbplpwwDLw1ZrlYOkk%2BVHge7xZKSkFMpggIyXQ5ioJc%2FPhrMo3oe0hWmcvxX5mEsRrsW6J5fTnj1%2BgB%2F9aZ08t%2BtSXh2Oxa5zRpgOIZ8rSczdL5CVcFOzFYywGN%2BPDLOX30PqAByOvwAYrbSjiLDcinxju1bpwapanXCh%2FVYAbQ7qOGFp5tCOOCRAQ%3D%3D&sign_type=RSA2&timestamp=2023-11-14+14%3A57%3A09&version=1.0';
    const resule = await Alipay.alipay(payInfo);
    console.log('alipay:resule-->>>', resule);
  }

2.微信

2.1.微信开放平台
https://pay.weixin.qq.com/static/product/product_intro.shtml?name=app

https://open.weixin.qq.com/cgi-bin/applist?t=manage/list&page=0&num=20&openapptype=1&lang=zh_CN&token=49144ee869298d0735db09fa995b8fa4e2ce6ba0

2.2.微信登录


微信sdk IOS接入指南:
https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html

2.2.1.使用库

官网:https://www.npmjs.com/package/react-native-wechat-lib/v/3.0.4
npm i react-native-wechat-lib@3.0.4

在ios项目下新增WeChatSDK文件夹把openSDK内的文件复制到WeChatSDK文件夹中

创建react native项目的笔记,react-native,react native,笔记,react.js
创建react native项目的笔记,react-native,react native,笔记,react.js文章来源地址https://www.toymoban.com/news/detail-651149.html

应用 Universal Links:https://xx.xxx.com/

参考官网:https://zhuanlan.zhihu.com/p/450896885?utm_id=0
1.IOS
官网:
https://developer.apple.com/library/archive/documentation/General/Conceptual/AppSearchUniversalLinks.html
1.创建apple-app-site-association

apple-app-site-association文件是一个json文件格式,不带后缀,格式如下:

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "TeamID.BundleID",
                "paths": [ "*" ]
            }
        ]
    }
}

appID是由TeamID和BundleID组成
TeamID:在Apple开发者中心可以查看
BundleID:即项目中的Bundle Identifier
paths:app的支持路径,如果不知道如何配置,可以直接写一个通配符*即可,如果有具体路径,则所有路径最后都要加上通配符/*

2.上传apple-app-site-association文件到服务器
你可以把文件放在一个你有权访问的服务器下面,任何可以访问的服务器下面都行

3.app端需要配置applinks
在Xcode中添加Associated Domains

在浏览器访问https://api.google.com/apple-app-site-association
applinks:你的服务器域名,比如applinks:api.google.com


2.Android

具体来说,这个`<data>`元素指定了Deep Link的以下三个部分:

- `android:scheme`: Deep Link的方案(scheme),用于标识链接的类型。在示例中,`myApp`是Deep Link的方案。
- `android:host`: Deep Link的主机名,用于指定链接的域名或主机。在示例中,`app.xxxx.com`是Deep Link的主机名。
- `android:pathPrefix`: Deep Link的路径前缀,用于指定链接的路径。在示例中,`/app/activityCenter`是Deep Link的路径前缀。

<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />

    <data
      android:host="xxx.xxx.com"
      android:pathPrefix="/"
      android:scheme="xxxxx" />

</intent-filter>

到了这里,关于创建react native项目的笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React-Native: Android 编译过程中 gradle 依赖包下载各种下载不下来、下载超时、极慢下载的处理方案。

     报错提示如下 1、下载不下来、下载超时。   2、下载极慢,基本就是几KB的在慢慢下载。  解决方案 就以报错提示来看,提供的下载jar压缩包的链接,丢到浏览器也是很难下载的。 但是,我们可以换个仓库去下载 https://mvnrepository.com/ 1、浏览器打开上面的链接 2、输入框搜

    2024年02月02日
    浏览(62)
  • 使用 React Native CLI 创建项目

    需要掌握的知识点 掌握 JavaScript 基础知识 掌握 React 相关基础知识 掌握 TypeScript 相关基础知识 安装软件前需要首先安装Chocolatey。Chocolatey 是一种流行的 Windows 包管理器。 安装 nodejs 和 JDK 安装需要的开发工具 VsCode Android Studio(主要是用来安装虚 SDK 和安装虚拟设备) 使用

    2024年02月14日
    浏览(57)
  • 创建React Native的第一个hello world工程

    需要安装好node、npm环境 如果之前没有安装过 react-native-cli 脚手架的,可以按照下述步骤直接安装。如果已经安装过的,但是在使用这个脚手架初始化工程的时候遇到下述报错的话 也可以先直接卸载 正常安装过程: 安装 react-native-cli 安装 react-native 安装完成之后,可以用脚手

    2024年02月07日
    浏览(46)
  • React Native自学笔记

    提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 例如:第一章 Python 机器学习入门之pandas的使用 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,

    2024年02月05日
    浏览(48)
  • React Native Expo项目上传文件

              https://chat.xutongbao.top/ https://docs.expo.dev/versions/latest/sdk/document-picker/ https://blog.csdn.net/xutongbao/article/details/131981469?spm=1001.2014.3001.5501 

    2024年02月15日
    浏览(50)
  • React native 已有项目升级兼容web

     概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网  深入理解Webpack及Babel的使用 - 掘金 Introduction to React Native for Web // React Native for Web Webpack 是一个现代的 JavaScript 应用程序的静态模块打包工具,它将应用程序所依赖的各种资源(js、css、图片等)视为模块,通过 loader

    2024年02月16日
    浏览(37)
  • React Native 集成到iOS原有的项目上

    集成到现有原生应用 把 React Native 组件集成到 iOS 应用中有如下几个主要步骤: 配置好 React Native 依赖和项目结构。 了解你要集成的 React Native 组件。 使用 CocoaPods,把这些组件以依赖的形式加入到项目中。 创建 js 文件,编写 React Native 组件的 js 代码。 在应用中添加一个RC

    2024年02月12日
    浏览(74)
  • 探索React Native认证实战示例项目:打造安全的移动应用体验

    项目地址:https://gitcode.com/hezhii/react-native-auth-example 在移动开发领域,React Native以其跨平台和高效性能而备受青睐。如果你正在寻找一个直观的、基于React Native的身份验证实现示例,那么这个项目—— react-native-auth-example ,将会是你的理想之选。 react-native-auth-example 是一个简单

    2024年04月27日
    浏览(41)
  • 重启React Native老项目的奇幻之旅:填坑实录与解决方案分享

    这两天为了重启五年前基于 React Native(版本 0.59.9)开发的老项目,经过各种填坑查询等操作,最终把它成功地运行起来了。 在这篇文章中,我将详述那些遭遇的挑战以及对应的解决方案,以期为同样面临此类困境的开发者提供宝贵的经验参考。 这个项目涉及到的环境基本版

    2024年04月16日
    浏览(38)
  • React Native expo项目使用expo-image-picker上传图片

     app.json: https://docs.expo.dev/versions/latest/sdk/imagepicker/      expo-image-picker 图片上传 要使用Expo的ImagePicker库进行图片上传,您可以按照以下步骤操作。 首先,确保您已在项目中安装了Expo的ImagePicker库。 然后,您可以使用以下代码来选择图片并上传: 此示例使用Button和Image组件创

    2024年02月15日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包