请问react中img的src需要import引入图片路径,如何能写相对路径啊,build生成以后它会改图片名字,所以用

请问react中img的src需要import引入图片路径,如何能写相对路径啊,build生成以后它会改图片名字,所以用,第1张

BIAS0:= (C-MA(C,2))/MA(C,2)*100

BIAS1 := (C-MA(C,12))/MA(C,12)*100

BIAS2 := (C-MA(C,26))/MA(C,26)*100

BIAS3 := (C-MA(C,48))/MA(C,48)*100

HXL:=V/CAPITAL*100

D1:=INDEXC

D2:=MA(D1,56)

DR2:=D1/D2<0.94

E1:=(C-HHV(C,12))/HHV(C,12)*10

E2:=(C-REF(C,26))/REF(C,26)*10

当前环境

OS: macOS High Sierra 10.13.5

Node: 8.11.3

Yarn: 1.7.0

npm: 5.6.0

Watchman: 4.9.0

Xcode: Xcode 9.4.1

react: 16.3.1 =>16.3.1

react-native: 0.55.4 =>0.55.4

react-native-splash-screen: 3.1.0 =>3.1.0

1:用Xcode打开项目, 找到Libraries目录,右键选择Add Files to [your project's name]

2:在{project}/node_modules/react-native-splash-screen/ios找到SplashScreen.xcodeproj文件,并添加

3:在XCode中,选择你的项目, 选择bilid Phases并将SplashScreen.xcodeproj/Products/libSplashScreen.a文件添加到Link Binary With Libraries中,拖过去即可

4:添加搜索路径:在项目 → Build Settings → Search Paths → Header Search Paths处添加一项为$(SRCROOT)/../node_modules/react-native-splash-screen/ios

1:在项目目录{prject}/android/下找到settings.gradle文件添加一下内容

2:在项目目录{prject}/android/app/下找到build.gradle文件添加compile project(':react-native-splash-screen')

3:找到项目目录{project}/android/app/src/main/java/com/app/下MainApplication.java文件,引入import org.devio.rn.splashscreen.SplashScreenReactPackage并添加new SplashScreenReactPackage()

1:找到项目目录{project}/ios/{project}/下AppDelegate.m文件,引入#import "SplashScreen.h"添加内容如下

2:在XCode中, 点击App/Images.xcassrts通过LaunchImage添加启动图片

3:在XCode中,选择你的项目, 选择General找到App Icons and Launch Images下的Launch Images Sourc选择你设置好的LaunchImage

4:如出现错误# unknown receiver 'SplashScreen'did you mean 'RNSplashScreen', 则改动源码以及AppDelegate.m文件如下:

        4.1.源码改动: 找到{project}/node_modules/react-native-splash-screen/ios文件夹下的RNSplashScreen.m文件,将其[SplashScreen show]修改为[RNSplashScreen show],如下图

  4.2:AppDelegate.m文件改动: 找到项目目录{project}/ios/{project}/下AppDelegate.m文件,将所有SplashScreen改为RNSplashScreen即可,如下图

4.3:重启尝试是否有其他问题,修改源码地址可查看我的 github 项目地址,更多问题请查看官方 issues

1:在项目目录{prject}/android/app/src/main/res/下创建layout文件夹

在layout文件夹下创建launch_screen.xml添加一下内容

2:将你的启动图改名为launch_screen.png并添加到{prject}/android/app/src/main/res/文件夹下相应的drawable文件夹中(根据需求配置相应大小的文件夹)

1.drawable-ldpi

2.drawable-mdpi

3.drawable-hdpi

4.drawable-xhdpi

5.drawable-xxhdpi

6.drawable-xxxhdpi

3:在{prject}/android/app/src/main/res/values/文件夹下修改名为添加一个名为primary_dark的属性并设置其颜,添加内容如下

4:如果您希望启动屏幕透明,打开{prject}/android/app/src/main/res/values/styles.xml并添加<item name="android:windowIsTranslucent">trueitem>到文件中

首先引入进行模块import SplashScreen from 'react-native-splash-screen'

使用SplashScreen.hide()方法将其关闭

1.创建项目

2.cd到该文件夹

3.运行(开发模式)

如果再起一个服务器,可能会出现端口号不会自动排的现象,针对这种情况,可以在package.json中自行设置端口号,如下图

4.模拟数据服务器

    4.1  http://www.mockapi使用GitHub登录,创建一个新项目

    4.2点击进入

    4.3点击进入

       4.4填写信息

            4.4.1填写路由名称(数据表名)

            4.4.2填写数据表里的内容

            4.4.3生成链接

            4.4.4在浏览器地址栏中输入地址加路由records

4.5访问数据

        第一种方法:通过外网进行访问

        ①浏览器地址栏测试数据访问

        ②终端测试数据访问

        ③浏览器console debug栏测试api接口(get方式)

        第二种方法:将json数据存放在本地服务器进行访问

        1.链接: https://github.com/typicode/json-server

        2.全局安装

        3.在fssytem中创建一个json文件格式为{“records”:},然后将前文通过外 网地址访问到的数据赋值粘贴到:后面

           4.运行服务器

        5.在地址栏中输入命令中的http地址(服务器运行中)

  4.6App.js中

4.7发送请求获取数据(在项目中使用jQuery和axios优化App.js)之使用 jQuery方式

    4.7.1命令安装jquery

    4.7.2 App.js中导入jQuery组件

    4.7.3使用jQuery发请求

    4.7.4使用传统的map遍历(App.js中)

    4.7.5records文件中

        4.7.4使用ES6扩展运算符

        4.7.5Records.js

        4.8优化部分

                4.8.1需要在record.js优化时间显示

                4.8.2优化jQuery引入app.js

                4.8.3引入显示状态和错误显示状态

                        4.8.3.1定义isloaded(是否完成加载),定义error

                        4.8.3.2重设状态机,分别设置成功时和失败时的状态

                        4.8.3.3视情况进行判断,写出对应的显示内容

4.9发送请求获取数据(在项目中使用jQuery和axios优化App.js)之使用 axios方式(与jQuery两种方法任选其一即可)

网址:https://github.com/axios/axios

    4.9.1安装

    4.9.2导入

    4.9.3使用因为axios会将所获取的数据存在data的集合中,所以需要response.data

        4.9.4引入显示状态和错误显示状态

5.0优化URL请求,目的是使用环境变量来将URL请求地址写灵活,方便统一管理。

方法一 :src中创建一个utils文件夹,创建一个Config.js文件,配置环境变量

App.js中导入

使用

由于windows系统不支持配置环境变量,解决方式如下:

Package.json中配置(红框之间有空格)

重启服务器

页面显示

方法二:

在根目录下创建一个.env.development.local 文件(与src平级)

在package.json中删除之前配置的东西,恢复原状

重启服务器

继续优化

    1.删除原来的后缀

    2.App.js中简写

       3.config.js中

        4.App.js

�        5.提取公共变量

功能:增加input框,实现添加,编辑,取消,更新,删除等功能

6.0增加input框

6.1在components文件夹中创建一个名为Input的文件,因为bootstrap按钮和input框相比较大,所以需要另外设置css样式进行引入使用

效果图如下:

6.2实现添加提交功能

    1. Input文件中通过设置input的onChange事件来获取输入的值

        1.1调用selectedinfo方法

        1.2为了保证所有选框都填写完整才可以提交的情况,这里需要设置一下button的属性,当所有都完整的时候,button才可以点击

    1.3点击button进行提交

        1.3.1使用post方式将数据提交到服务器上(在Config.js文件配置post 方法并开放)

        1.3.2在子组件RecordForm中导入上文方法并使用,服务器响应成功后将该值传递给父级App

    1.3.3父级App接收到值后进行处理负责显示在界面上

        1.3.3.1导入input文件

�        1.3.3.2设置与子级对应的行间属性handleNewRecord

        1.3..3.3设置addRecord方法

6.3实现编辑功能

        1.先在增加编辑、删除功能键,并在App.js文件中增加一个 *** 作表头。

        2.当点击编辑的时候,前面的内容状态变为input可修改的状态框

                2.1设置一个中间变量edit,默认状态是false,当点击编辑按钮时,edit为true,对应内容状态为可输入的input框。Edit的状态决定使用哪个模板.

                    2.1.1设置edit中间变量

                    2.1.2点击编辑按钮调用handleEdit事件(定义点击编辑前的状态模板)

                2.1.3定义handleEdit方法,并重置状态机设置edit状态

            2.1.4定义点击编辑按钮后的状态模板

            2.1.5根据edit的状态来决定使用哪个模板

6.4实现取消功能(直接在取消调用与编辑按钮一样的方法即可)

6.5实现更新功能

   1.先提交数据到服务器,传值给父级

        1.1在Config,js文件中配置更新的put方法,为了得到更新的是哪一个数据,还需要传id值

        1.2在Record导入该方法,以便在更新事件中使用

        1.3给更新按钮增加更新事件

        1.4定义该更新事件

            修改前

            修改后

    Record文件中所有之前格式类似为this.props.data的都改为如下格式:

        1.5为了找到当前这个input框的值,需要给input增加一个ref行间属性

2.父级app进行处理显示

    2.1设置与子


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/7887879.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存