美文网首页
React Native 快速搭建商城项目基础结构

React Native 快速搭建商城项目基础结构

作者: Volon | 来源:发表于2019-11-15 15:44 被阅读0次

一、init指定项目版本(如果直接使用最新版可不要后缀 --verbose --version 0.52.0)

react-native init demo --verbose --version 0.52.0

二、引入必要插件

cd demo/
npm install axios react-native-elements react-native-vector-icons react-navigation react-redux redux redux-thunk query-string prop-types react-native-device-info --save
react-native link react-native-device-info && react-native link react-native-vector-icons

三、启动(RN版本升级会出现一些莫名其妙的坑)
启动失败大概解决方案:
1.在文件根目录执行命令(注意版本)

cd node_modules/react-native/third-party/glog-0.3.4 && ../../scripts/ios-configure-glog.sh

2.Build failed 一步到位命令

rm -rf node_modules/ && npm install && cd ios/ && rm -rf build/ && cd .. && react-native run-ios

3.其他帖子里面也有相关解决办法

四、拷贝并替换代码
1.拷贝下方文件App.js替换掉本项目中该文件
2.拷贝下方文件src文件粘贴到本项目的根目录
3.reload 一下模拟器(这一步之后肯定会报错),在终端执行命令,并在此reload

rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json

文件地址:https://download.csdn.net/download/koufulong/11978558

五、嵌入图标文件

1.在xcode中,将node_modules/react-native-vector-icons下的Fonts文件夹拖入到项目中,并确保选择Create groups


在这里插入图片描述

2.查看Info.plist 中是否有Fonts provided by application,如果没有,手动添加


在这里插入图片描述

或者在info.plist文件中加入以下代码:

<key>UIAppFonts</key>
    <array>
        <string>Entypo.ttf</string>
        <string>EvilIcons.ttf</string>
        <string>Feather.ttf</string>
        <string>FontAwesome.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialCommunityIcons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Zocial.ttf</string>
    </array>

相关文章

网友评论

      本文标题:React Native 快速搭建商城项目基础结构

      本文链接:https://www.haomeiwen.com/subject/vqrsictx.html