Git Product home page Git Product logo

react-blogs's Introduction

react-blogs's People

Contributors

wutianmei avatar

Watchers

 avatar  avatar

react-blogs's Issues

react-native 修改app.json中的 name和displayName (ios版本测试)

修改displayName(app安装后的名称)

这个比较简单,在app.json中修改后,还要在 .../ios/RNDemo1/Info.plist 中修改

<key>CFBundleDisplayName</key>
<string>RNDemo-显示名称</string>

然后运行react-native run-ios即可生效

修改name

这个改的有点多,可以直接删除掉iosandroid目录,然后运行:

react-native eject

再次生成 iosandroid目录,再运行react-native run-ios(这个过程有点久)

react-native 清理缓存[mac]

  1. Clear watchman watches:

    watchman watch-del-all

  2. Delete the node_modules folder:

    sudo rm -rf node_modules && npm install

    sudo rm -rf node_modules && yarn

  3. Reset Metro Bundler cache:

    rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache

  4. Remove haste cache:

    rm -rf /tmp/haste-map-react-native-packager-*

5.进入ios中执行 pod install否则会报以下错误

Unhandled JS Exception: Invariant Violation: requireNativeComponent: "RNCWKWebView" was not found in the UIManager.

This error is located at:
    in RNCWKWebView (at WebView.ios.js:289)
    in RCTView (at View.js:35)
    in View (at WebView.ios.js:292)
    in WebView (at Canvas.js:154)
    in RCTView (at View.js:35)
    in View (at Canvas.js:153)
    in Canvas (at App.js:86)
    in RCTView (at View.js:35)
    in View (at App.js:84)
    in RCTView (at View.js:35)
    in View (created by Portal.Host)
    in Portal.Host (created by Provider)
    in ThemeProvider (created by Provider)
    in LocaleProvider (created by Provider)
    in Provider (at App.js:83)
    in App (at renderApplication.js:40)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:39)

react-native: No bundle url present

错误详情

No bundle URL present.

Make sure you're running a packager server or have included a .jsbundle file in your application bundle.

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start

解决步骤

  • 添加host 127.0.0.1 localhost,这是由于mac的localhost并不是指向127.0.0.1,可以使用nslookup localhost查看详情
Server:         192.168.1.1
Address:        192.168.1.1#53

因此当启动时就找不到对应的地址:

URL: http://192.168.1.1:8081/index.bundle?platform=ios&dev=true&minify=false

  • 删除/ios/build

  • react-native run-ios

react-router 指定路由浏览器中单页面刷新404问题

当直接从页面入口路由逐个点击链接时,没问题

image

当在当前页面刷新浏览器页面时情况如下

image

  • 原因
    nginx会试图在/react/test/snacks目录下找index.html,404是肯定的。此时需要设置一个代理如下

location / {
root "D:/测试";
index index.html index.htm;
}
location /react/test/ {
try_files $uri /react/test/index.html;
root "D:/测试";
}

参考地址: http://yjph83.iteye.com/blog/2311687

react-native: DatePickerIOS 组件无法展示

代码

 <View style={styles.container}>
        <DatePickerIOS date={this.state.initDate} onDateChange={this.setDate} />
 </View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
})

原因分析

由于没有给DatePickerIOS组件指定宽度,而父组件中 alignItems:center,故而导致DatePickerIOS组件的宽度为0,所以无法展示

解决办法

  • 第一种: 给DatePickerIOS指定宽度如
    <DatePickerIOS style={{ width: Dimensions.get("window").width }} date={this.state.initDate} onDateChange={this.setDate} />

  • 第二种:去掉alignItems:center,因为 alignItems的默认值是stretch (如果项目未设置高度或设为auto,将占满整个容器的高度。)

Expo开发解决问题的过程

expo start --web -c (清缓存启动)

Your JavaScript transform cache is empty, rebuilding (this may take a minute).
Starting Webpack on port 19006 in production mode.
[=================== ] 95% (11.0 seconds)(node:52976) UnhandledPromiseRejectionWarning: Error: It was not possible to generate splash screen '/usr/local/lib/node_modules/expo-cli/node_modules/@expo/webpack-config/web-default/icon.png'. This command requires version 1.10.0 of `sharp-cli`. 
You can install it using `npm install -g [email protected]`. 

For prerequisites, see: https://sharp.dimens.io/en/stable/install/#prerequisites
    at new IconError (/@expo/webpack-pwa-manifest-plugin@1.2.4/src/errors/IconError.js:2:20)

根据提示安装

npm i -g npm [email protected]

又报错了

/usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js
/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
/usr/local/bin/sharp -> /usr/local/lib/node_modules/sharp-cli/bin/cli.js

> sharp@0.22.1 install /usr/local/lib/node_modules/sharp-cli/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.7.4/libvips-8.7.4-darwin-x64.tar.gz
/usr/local/lib/node_modules/sharp-cli/node_modules/sharp/install/libvips.js:83
          throw err;
          ^

Error: unable to verify the first certificate
    at TLSSocket.onConnectSecure (_tls_wrap.js:1058:34)
    at TLSSocket.emit (events.js:198:13)
    at TLSSocket._finishInit (_tls_wrap.js:636:8)
  TOUCH Release/obj.target/libvips-cpp.stamp
  CXX(target) Release/obj.target/sharp/src/common.o
../src/common.cc:25:10: fatal error: 'vips/vips8' file not found
#include <vips/vips8>
         ^~~~~~~~~~~~

image

根据错误提示搜索问题

brew install vips

安装成功后再次尝试

npm install -g [email protected]

 sharp@0.22.1 install /usr/local/lib/node_modules/sharp-cli/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Detected globally-installed libvips v8.8.1
info sharp Building from source via node-gyp
Package libffi was not found in the pkg-config search path.
Perhaps you should add the directory containing `libffi.pc'
to the PKG_CONFIG_PATH environment variable
Package 'libffi', required by 'gobject-2.0', not found
gyp: Call to 'PKG_CONFIG_PATH="/usr/lib/pkgconfig:/usr/local/Homebrew/Library/Homebrew/os/mac/pkgconfig/10.14:/usr/local/lib/pkgconfig:/usr/lib/pkgconfig" pkg-config --cflags-only-I vips-cpp vips glib-2.0 | sed s\/-I//g' returned exit status 0 while in binding.gyp. while trying to load binding.gyp

根据提示

image

vim ~/.bash_profile
添加:
export PKG_CONFIG_PATH="${PKG_CONFIG_PATH}:/usr/local/opt/libffi/lib/pkgconfig"
image

source ~/.bash_profile

再试尝试

npm install -g [email protected]

终于成功了

XYSZM01652:~ wutianmei$ npm install -g sharp-cli@1.10.0
/usr/local/bin/sharp -> /usr/local/lib/node_modules/sharp-cli/bin/cli.js

> sharp@0.22.1 install /usr/local/lib/node_modules/sharp-cli/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Detected globally-installed libvips v8.8.1
info sharp Building from source via node-gyp
  TOUCH Release/obj.target/libvips-cpp.stamp
  CXX(target) Release/obj.target/sharp/src/common.o
  CXX(target) Release/obj.target/sharp/src/metadata.o
  CXX(target) Release/obj.target/sharp/src/stats.o
  CXX(target) Release/obj.target/sharp/src/operations.o
  CXX(target) Release/obj.target/sharp/src/pipeline.o
  CXX(target) Release/obj.target/sharp/src/sharp.o
  CXX(target) Release/obj.target/sharp/src/utilities.o
  SOLINK_MODULE(target) Release/sharp.node
+ sharp-cli@1.10.0
added 134 packages from 118 contributors in 48.834s

总结

  • 安装包的过程中解决问题的方案往往都可以在错误提示中找到
  • 使用 cnpmyarn有时并不能成功安装所有的包,当多次尝试无果时我们要回到根源使用npm

react-native:安装react-native扩展包时报错 Invariant Violation: requireNativeComponent:

安装 @react-native-community/slider

重载后报错

Invariant Violation: requireNativeComponent: "RNCSlider" was not found in the UIManager.

This error is located at:
    in RNCSlider
    in ForwardRef
    in RCTView
    in p
    in RCTView
    in l
    in v
    in RCTView
    in RCTView
    in c

exports
    AppEntry.bundle?platform=ios&dev=false&minify=true&hot=false:170:1627
get
    ...
    [native code]:0

image

解决方式

react-native link @react-native-community/slider

cd ios

pod install

react-native run-ios

提示

react-native-webview 也同理

react-native:Unhandled JS Exception: Can't find variable: require

具体错误信息

Unhandled JS Exception: Can't find variable: require

http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:400:24
global code@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:890:3

global code
    index.bundle?platform=ios&dev=true&minify=false:890:3

错误原因

react-native中不能使用 @babel/preset-env

重新启动

react-native start --reset-cache

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.