美文网首页
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