-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathreact-native问题汇总.html
1 lines (1 loc) · 44.8 KB
/
react-native问题汇总.html
1
<!doctype html><html class="theme-next mist"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="google-site-verification" content="PBwskePkFkRAnqisXEBN7FyYihV0DkOHyvEC2eDt6Gg"><meta name="referrer" content="never"><script src="/lib/pace/pace.min.js?v=1.0.2"></script><link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="baidu-site-verification" content="haLEFmuOYV"><script>!function(e,t,o,c,i,a,n){e.DaoVoiceObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,a=t.createElement(o),n=t.getElementsByTagName(o)[0],a.async=1,a.src=c,a.charset="utf-8",n.parentNode.insertBefore(a,n)}(window,document,"script",("https:"==document.location.protocol?"https:":"http:")+"//widget.daovoice.io/widget/0f81ff2f.js","daovoice"),daovoice("init",{app_id:"0f81ff2f"}),daovoice("update")</script><link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.0.2" rel="stylesheet" type="text/css"><meta name="keywords" content="react-native"><link rel="alternate" href="/atom.xml" title="Moorez" type="application/atom+xml"><link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?v=5.0.2"><meta name="description" content="前言前些天使用react-native 写了个项目，遇到的问题挺多的，在这里记录下来📝，避免忘记。本篇文章会不定期更新!"><meta name="keywords" content="react-native"><meta property="og:type" content="article"><meta property="og:title" content="react-native问题汇总"><meta property="og:url" content="http://www.shenzekun.cn/react-native问题汇总.html"><meta property="og:site_name" content="Moorez"><meta property="og:description" content="前言前些天使用react-native 写了个项目，遇到的问题挺多的，在这里记录下来📝，避免忘记。本篇文章会不定期更新!"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-043813.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-044331.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-044718.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-045023.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15257552426894.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-045522.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-045839.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-050038.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-050103.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-050336.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-050857.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-051045.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-051232.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-051715.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-051845.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-052245.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-052442.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-052540.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-052704.png"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-052952.png"><meta property="og:updated_time" content="2018-10-22T02:44:58.760Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="react-native问题汇总"><meta name="twitter:description" content="前言前些天使用react-native 写了个项目，遇到的问题挺多的，在这里记录下来📝，避免忘记。本篇文章会不定期更新!"><meta name="twitter:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-043813.png"><script type="text/javascript" id="hexo.configuration">var NexT=window.NexT||{},CONFIG={scheme:"Mist",sidebar:{position:"left",display:"post"},fancybox:!0,motion:!1,duoshuo:{userId:"0",author:"Author"}}</script><link rel="canonical" href="http://www.shenzekun.cn/react-native问题汇总.html"><title>react-native问题汇总 | Moorez</title></head><body itemscope itemtype="//schema.org/WebPage" lang="zh-Hans"><div class="container one-collumn sidebar-position-left page-post-detail"><div class="headband"></div><a href="https://github.com/shenzekun" class="github-corner" aria-label="View source on Github"><svg width="92" height="92" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0 0 115 115 130 115 142 142 250 250 250 0Z"></path><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4L133.7 101.6C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header id="header" class="header" itemscope itemtype="//schema.org/WPHeader"><div class="header-inner"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">Moorez</span><span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle"></p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span><span class="btn-bar"></span><span class="btn-bar"></span></button></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-categories"><a href="/categories" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分类</a></li><li class="menu-item menu-item-about"><a href="/about" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i><br>关于</a></li><li class="menu-item menu-item-archives"><a href="/archives" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档</a></li><li class="menu-item menu-item-tags"><a href="/tags" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>标签</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>搜索</a></li></ul><div class="site-search"><div class="popup"><span class="search-icon fa fa-search"></span> <input type="text" id="local-search-input"><div id="local-search-result"></div><span class="popup-btn-close">close</span></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://www.shenzekun.cn/react-native问题汇总.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="shenzekun"><meta itemprop="description" content=""><meta itemprop="image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/avatar1.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Moorez"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">react-native问题汇总</h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2018-05-08T13:05:13+08:00" content="2018-05-08">2018-05-08</time></span> <span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/前端/" itemprop="url" rel="index"><span itemprop="name">前端</span></a></span></span> <span id="/react-native问题汇总.html" class="leancloud_visitors" data-flag-title="react-native问题汇总"> | <span class="post-meta-item-icon"><i class="fa fa-eye"></i></span> <span class="post-meta-item-text">热度</span><span class="leancloud-visitors-count"></span> <span>℃</span></span><div class="post-wordcount"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i></span> <span class="post-meta-item-text">字数统计</span> <span title="字数统计">1,521 字</span> <span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-clock-o"></i></span> <span class="post-meta-item-text">阅读时长</span> <span title="阅读时长">6 分钟</span></div></div></header><div class="post-body" itemprop="articleBody"><hr><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote><p>前些天使用react-native 写了个项目，遇到的问题挺多的，在这里记录下来📝，避免忘记。本篇文章会不定期更新!</p></blockquote><a id="more"></a><h2 id="问题汇总"><a href="#问题汇总" class="headerlink" title="问题汇总"></a>问题汇总</h2><h3 id="问题一"><a href="#问题一" class="headerlink" title="问题一"></a>问题一</h3><p>出现Remote debugger is in a background tab which may cause apps to perform slowly黄色警报<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-043813.png" alt=""></p><p><strong>解决方法</strong><br>把那个chrome的Tab页保持最前，窗口不要最小化就好了。。。。</p><h3 id="问题二"><a href="#问题二" class="headerlink" title="问题二"></a>问题二</h3><p>出现connection to <a href="http://localhost:8081" target="_blank" rel="external">http://localhost:8081</a> 红色错误<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-044331.png" alt=""></p><p><strong>解决方法</strong><br>这个很神奇。遇到了多按 ⌘R几下或者把模拟器上的项目删除之后重新加载一般就会解决。</p><blockquote><p>bad news: metro v0.29.0 won’t work with RN 0.54-0.55 because it introduced a new config param that RN is not handling yet (we’re working on improving configuration compatibility between RN and metro).</p><p>good news: the actual fix needed to solve this issue is in the RN repo (7be3d1c), so cherry-picking it into the 0.54 and 0.55 branches and releasing a RN minor version will fix this. (cc @hramos, @grabbou ).</p></blockquote><p>或者使用下面命令可以解决问题</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">yarn cache clean&&yarn</div></pre></td></tr></table></figure><h3 id="问题三"><a href="#问题三" class="headerlink" title="问题三"></a>问题三</h3><p>出现Runtime is not ready for debugging红色错误<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-044718.png" alt=""></p><p><strong>两种解决方法</strong></p><ol><li>关掉<a href="http://localhost:8081/debugger-ui/" target="_blank" rel="external">http://localhost:8081/debugger-ui/</a> 再重新开启就行了</li><li>按 command+d 将Debug JS Remotely关掉也可以</li></ol><h3 id="问题四"><a href="#问题四" class="headerlink" title="问题四"></a>问题四</h3><p>出现Unrecognized font family 红色报警<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-045023.png" alt=""></p><p><strong>解决方法</strong><br>在终端输入</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">react-native link react-native-vector-icons</div></pre></td></tr></table></figure><p>然后重新启动即可</p><h3 id="问题五"><a href="#问题五" class="headerlink" title="问题五"></a>问题五</h3><p>React Native不支持自动计算Image等View的大小</p><p><a href="http://facebook.github.io/react-native/docs/images.html#why-not-automatically-size-everything" target="_blank" rel="external">详情</a></p><h3 id="问题六"><a href="#问题六" class="headerlink" title="问题六"></a>问题六</h3><p>react-native-interactable 出现 Invariant Violation红色警报<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15257552426894.jpg" alt=""></p><p><strong>解决方法</strong><br>降级：将 react-native 版本降到0.53.0 就行了<br>参考 <a href="https://github.com/wix/react-native-interactable/issues/185" target="_blank" rel="external">wix/react-native-interactable#185</a></p><h3 id="问题七"><a href="#问题七" class="headerlink" title="问题七"></a>问题七</h3><p>Build后遇到’No bundle URL present’ error<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-045522.png" alt=""></p><p><strong>解决方法</strong><br>关闭SS,VPN这类的服务，重新 <code>react-native run-ios</code> 即可。很神奇。。。</p><p>官方也有这个 <a href="https://github.com/facebook/react-native/issues/12754" target="_blank" rel="external">issue</a></p><h3 id="问题八"><a href="#问题八" class="headerlink" title="问题八"></a>问题八</h3><p>出现regeneratorRuntime is not defined<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-045839.png" alt=""></p><p><strong>解决方法</strong></p><figure class="highlight livecodeserver"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">react-native <span class="built_in">start</span> <span class="comment">--reset-cache</span></div></pre></td></tr></table></figure><p>最终原因是因为一个组件没删干净🤣</p><h3 id="问题九"><a href="#问题九" class="headerlink" title="问题九"></a>问题九</h3><p>出现:CFBundleIdentifier”, Does Not Exist 错误</p><p><strong>解决方法</strong><br>打开 xcode 运行项目出现<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-050038.png" alt=""><br>在这里面有个 libInteractable.a 删除掉就行了<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-050103.png" alt=""></p><p>参考：<a href="https://github.com/rebeccahughes/react-native-device-info/issues/251" target="_blank" rel="external">rebeccahughes/react-native-device-info#251</a></p><h3 id="问题十"><a href="#问题十" class="headerlink" title="问题十"></a>问题十</h3><p>删除包注意事项</p><p>首先 <code>react-native unlink <lib name></code><br>然后 <code>yarn remove <lib name></code></p><p><strong>一定要这样做</strong>不然会有问题。。。</p><h3 id="问题十一"><a href="#问题十一" class="headerlink" title="问题十一"></a>问题十一</h3><p>出现Invariant Violation: View config not found for name 红色警报<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-050336.png" alt=""></p><p><strong>解决方法</strong><br><a href="https://stackoverflow.com/questions/46750477/react-native-invariant-violation-view-config" target="_blank" rel="external">https://stackoverflow.com/questions/46750477/react-native-invariant-violation-view-config</a></p><h3 id="问题十二"><a href="#问题十二" class="headerlink" title="问题十二"></a>问题十二</h3><p>Button 组件无法直接使用 style定宽度和高度等等</p><p><strong>解决方法</strong></p><blockquote><p>If this button doesn’t look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback.</p></blockquote><p>也就是说可以使用 <code>TouchableOpacity</code> 或者 <code>TouchableNativeFeedback</code> 组件代替</p><h3 id="问题十三"><a href="#问题十三" class="headerlink" title="问题十三"></a>问题十三</h3><p>使用TouchableWithoutFeedback 出现错误<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-050857.png" alt=""></p><p><strong>解决方法</strong><br>TouchableWithoutFeedback，这个组件必须至少有一个child，如果是多个组件，必须以view来包装。写成这样就可以了</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">render() {</div><div class="line"> <span class="keyword">return</span>(</div><div class="line"> <span class="xml"><span class="tag"><<span class="name">TouchableWithoutFeedback</span> <span class="attr">style</span>=<span class="string">{{flex:</span> <span class="attr">1</span>}} <span class="attr">onPress</span>=<span class="string">{dismissKeyboard}</span>></span></span></div><div class="line"> <span class="tag"><<span class="name">View</span> <span class="attr">style</span>=<span class="string">{{flex:</span> <span class="attr">1</span>}}></span></div><div class="line"> 。。。。。。。。。。</div><div class="line"> <span class="tag"></<span class="name">View</span>></span></div><div class="line"></div><div class="line"> <span class="tag"></<span class="name">TouchableWithoutFeedback</span>></span></div><div class="line"> );</div><div class="line">}</div></pre></td></tr></table></figure><h3 id="问题十四"><a href="#问题十四" class="headerlink" title="问题十四"></a>问题十四</h3><p>xcode出现Showing All Messages Code signing is required for product type ‘Unit Test Bundle’ in SDK ‘iOS 11.2’<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-051045.png" alt=""></p><p>在Xcode上<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-051232.png" alt=""><br>即可</p><h3 id="问题十五"><a href="#问题十五" class="headerlink" title="问题十五"></a>问题十五</h3><p>react-navigation TabNavigator点击切换反应迟钝。</p><p>在真机上调试react-navigation的TabNavigator，点击tab总感觉反应很慢，试了好久都是这样，大概有0.5秒之后才会切换体验很差。</p><p><strong>解决方法</strong><br>关闭debug模式。。。。</p><h3 id="问题十六"><a href="#问题十六" class="headerlink" title="问题十六"></a>问题十六</h3><p>React Navigation TabNavigator 一个帧的延迟</p><p>当页面加载时，下面的 tab 图标从第一个到第二个图标有一个帧的延迟</p><p><strong>解决方法</strong><br>定义initialLayout，用以防止react-native-tab-view渲染中一个帧的延迟</p><p>参考：<a href="https://github.com/react-native-community/react-native-tab-view#avoid-one-frame-delay" target="_blank" rel="external">https://github.com/react-native-community/react-native-tab-view#avoid-one-frame-delay</a></p><h3 id="问题十七"><a href="#问题十七" class="headerlink" title="问题十七"></a>问题十七</h3><p>出现timed out waiting for 红色警报<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-051715.png" alt=""></p><p><strong>解决方法</strong><br>重启模拟器。。。</p><h3 id="问题十八"><a href="#问题十八" class="headerlink" title="问题十八"></a>问题十八</h3><p>react native 没有\<br>组件换行</p><p><strong>解决方法</strong><br>可以在 Text 组件里写 {‘\n’},如：<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-051845.png" alt=""></p><h3 id="问题十九"><a href="#问题十九" class="headerlink" title="问题十九"></a>问题十九</h3><p>react native checkbox 原生组件只适合安卓</p><p><strong>解决方法</strong><br>可以使用这个 <a href="https://github.com/crazycodeboy/react-native-check-box" target="_blank" rel="external">https://github.com/crazycodeboy/react-native-check-box</a></p><h3 id="问题二十"><a href="#问题二十" class="headerlink" title="问题二十"></a>问题二十</h3><p>react-navigation的headerRight添加点击事件</p><p><strong>解决方法</strong><br>首先需要在componentDidMount(){}中动态的添加点击事件</p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="title">componentDidMount</span><span class="params">()</span></span>{</div><div class="line"> this<span class="selector-class">.props</span><span class="selector-class">.navigation</span><span class="selector-class">.setParams</span>({</div><div class="line"> navigatePress:this<span class="selector-class">.navigatePress</span></div><div class="line"> })</div><div class="line">}</div></pre></td></tr></table></figure><p>然后</p><figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="title">navigatePress</span> = <span class="params">()</span> =></span> {</div><div class="line"> alert(<span class="string">'点击headerRight'</span>);</div><div class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.props.navigation);</div><div class="line">}</div></pre></td></tr></table></figure><p>接下来就可以通过params方法来获取点击事件了（<strong>记住先要判断navigation.state.params是否存在，不然会报错</strong>。。。）</p><figure class="highlight pf"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">static navigationOptions = ({ navigation, screenProps }) => ({</div><div class="line"> title: navigation.<span class="keyword">state</span>.params?navigation.<span class="keyword">state</span>.params.title:null,</div><div class="line"> headerRight:(</div><div class="line"> <span class="variable"><Text onPress={navigation.state.params?navigation.state.params.navigatePress:null}></span></div><div class="line"> 返回</div><div class="line"> </Text></div><div class="line"> )</div><div class="line">});</div></pre></td></tr></table></figure><h3 id="问题二十一"><a href="#问题二十一" class="headerlink" title="问题二十一"></a>问题二十一</h3><p>react-navigation tab 点击 StatusBar 颜色问题</p><p><strong>解决方法</strong><br>详情 <a href="https://reactnavigation.org/docs/status-bar.html" target="_blank" rel="external">https://reactnavigation.org/docs/status-bar.html</a></p><h3 id="问题二十二"><a href="#问题二十二" class="headerlink" title="问题二十二"></a>问题二十二</h3><p>Image 标签不支持 http 问题</p><p><strong>解决方法</strong><br>ios 9 以上，默认是Https请求，如需支持Http，修改info.plist文件添加键值对就好了<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-052245.png" alt=""></p><h3 id="问题二十三"><a href="#问题二十三" class="headerlink" title="问题二十三"></a>问题二十三</h3><p>react-native-swiper 动态数据渲染，翻页出现错乱</p><p><strong>出现</strong><br>一开始，使用静态的数据没问题，但是使用动态加载数据就出现问题，经过一些调试发现，可能是 index 的问题，在 github 库里搜 issue 果然有人遇到过这个问题 <a href="https://github.com/leecade/react-native-swiper/issues/720" target="_blank" rel="external">https://github.com/leecade/react-native-swiper/issues/720</a></p><p><strong>解决方法</strong><br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-052442.png" alt=""><br>添加 key 值是你<strong>获取数据的长度</strong></p><h3 id="问题二十四"><a href="#问题二十四" class="headerlink" title="问题二十四"></a>问题二十四</h3><p>react-native-swiper 跳转索引 bug 问题。</p><p>一开始<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-052540.png" alt=""></p><p>在翻页的时候，出现索引随机变化的问题，当时看了一下 api 是没有问题的，一直定位到<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-052704.png" alt=""></p><p>将标题不显示就发现索引没有问题了，不会随机翻页。。。，接着在某一页看到题目比较大，发生了抖动，结果造成了随机翻页，再一看里面有数字和文字，大小不一样，设置一下字体就好了。。。。个人认为是抖动的时候可能触发了react-native-swiper的翻页，结果造成随机翻页。。。<br>神坑的 bug，找了4，5个小时。。。。😡</p><h3 id="问题二十五"><a href="#问题二十五" class="headerlink" title="问题二十五"></a>问题二十五</h3><p>ListView, FlatList, Sections and VirtualizedList paddingBottom 无效的问题。</p><p>ListView, FlatList, Sections and VirtualizedList 继承了 ScrollView<br>所以导致都有这个问题</p><p><strong>解决方法</strong></p><figure class="highlight xml"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">ScrollView</span> <span class="attr">contentContainerStyle</span>=<span class="string">{{paddingBottom:</span> <span class="attr">16</span>}} /></span></div></pre></td></tr></table></figure><h3 id="问题二十六"><a href="#问题二十六" class="headerlink" title="问题二十六"></a>问题二十六</h3><p>出现 could not connect to development server红色警报<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/2018-05-08-052952.png" alt=""></p><p><strong>解决方法</strong><br>关掉 vpn ，或者不要开全局模式。。。很神奇</p></div><div><div><div style="text-align:center;color:#ccc;font-size:14px">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div></div></div><div><div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><p><span>本文标题:</span><a href="/react-native问题汇总.html">react-native问题汇总</a></p><p><span>文章作者:</span><a href="/" title="访问 shenzekun 的个人博客">shenzekun</a></p><p><span>发布时间:</span>2018年05月08日 - 13:05</p><p><span>最后更新:</span>2018年10月22日 - 10:44</p><p><span>原始链接:</span><a href="/react-native问题汇总.html" title="react-native问题汇总">http://www.shenzekun.cn/react-native问题汇总.html</a><span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="http://www.shenzekun.cn/react-native问题汇总.html" aria-label="复制成功！"></i></span></p><p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p></div><script>var clipboard=new Clipboard(".fa-clipboard");$(".fa-clipboard").click(function(){clipboard.on("success",function(){swal({title:"",text:"复制成功",icon:"success",showConfirmButton:!0})})})</script></div><div></div><div><div style="padding:10px 0;margin:20px auto;width:90%;text-align:center"><div>您的支持将鼓励我继续创作！</div><button id="rewardButton" disable="enable" onclick='var qr=document.getElementById("QR");"none"===qr.style.display?qr.style.display="block":qr.style.display="none"'><span>赏</span></button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="/image/wechat-reward-image.png" alt="shenzekun WeChat Pay"><p>微信打赏</p></div></div></div></div><footer class="post-footer"><div class="post-tags"><a href="/tags/react/" rel="tag"><i class="fa fa-tag"></i>react</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/html5调用摄像头功能.html" rel="next" title="html5调用摄像头功能"><i class="fa fa-chevron-left"></i> html5调用摄像头功能</a></div><div class="post-nav-prev post-nav-item"><a href="/四种方法实现数据双向绑定.html" rel="prev" title="四种方法实现数据双向绑定">四种方法实现数据双向绑定<i class="fa fa-chevron-right"></i></a></div></div></footer></article><div class="post-spread"></div></div></div><div class="comments" id="comments"><div id="lv-container" data-id="city" data-uid="MTAyMC8yODgyMi81Mzky"></div></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span><span class="sidebar-toggle-line sidebar-toggle-line-middle"></span><span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">文章目录</li><li class="sidebar-nav-overview" data-target="site-overview">站点概览</li></ul><section class="site-overview sidebar-panel"><div class="site-author motion-element" itemprop="author" itemscope itemtype="//schema.org/Person"><img class="site-author-image" itemprop="image" src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/avatar1.jpg" alt="shenzekun"><p class="site-author-name" itemprop="name">shenzekun</p><p class="site-description motion-element" itemprop="description">Road endless its long and far, I will seek up and down！</p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/archives"><span class="site-state-item-count">39</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/categories"><span class="site-state-item-count">6</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/tags"><span class="site-state-item-count">19</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="feed-link motion-element"><a href="/atom.xml" rel="alternate"><i class="fa fa-rss"></i> RSS</a></div><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/shenzekun" target="_blank" rel="external nofollow" title="GitHub"><i class="fa fa-fw fa-github"></i> GitHub</a></span><span class="links-of-author-item"><a href="http://www.jianshu.com/u/b473784d730c" target="_blank" rel="external nofollow" title="简书"><i class="fa fa-fw fa-heartbeat"></i> 简书</a></span><span class="links-of-author-item"><a href="https://twitter.com/shenzekun" target="_blank" rel="external nofollow" title="Twitter"><i class="fa fa-fw fa-twitter"></i> Twitter</a></span><span class="links-of-author-item"><a href="https://segmentfault.com/u/juli_590dd17068b9e" target="_blank" rel="external nofollow" title="SegmentFault"><i class="fa fa-fw fa-meh-o"></i> SegmentFault</a></span><span class="links-of-author-item"><a href="http://blog.csdn.net/qq_33699981?viewmode=list" target="_blank" rel="external nofollow" title="csdn"><i class="fa fa-fw fa-crosshairs"></i> csdn</a></span><span class="links-of-author-item"><a href="https://juejin.im/user/5866ed77ac502e00612f1949" target="_blank" rel="external nofollow" title="掘金"><i class="fa fa-fw fa-spinner"></i> 掘金</a></span></div><div class="links-of-blogroll motion-element links-of-blogroll-inline"><div class="links-of-blogroll-title"><i class="fa fa-fw fa-globe"></i> 推荐阅读</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="http://www.uisdc.com/" title="优设" target="_blank">优设</a></li><li class="links-of-blogroll-item"><a href="http://www.zhangxinxu.com/" title="张鑫旭" target="_blank">张鑫旭</a></li><li class="links-of-blogroll-item"><a href="http://www.alloyteam.com/nav/" title="Web前端导航" target="_blank">Web前端导航</a></li><li class="links-of-blogroll-item"><a href="http://www.36zhen.com/t?id=3448" title="前端书籍资料" target="_blank">前端书籍资料</a></li><li class="links-of-blogroll-item"><a href="http://ife.baidu.com/" title="百度前端技术学院" target="_blank">百度前端技术学院</a></li><li class="links-of-blogroll-item"><a href="http://wf.uisdc.com/cn/" title="google前端开发基础" target="_blank">google前端开发基础</a></li></ul></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#问题汇总"><span class="nav-number">2.</span> <span class="nav-text">问题汇总</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#问题一"><span class="nav-number">2.1.</span> <span class="nav-text">问题一</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题二"><span class="nav-number">2.2.</span> <span class="nav-text">问题二</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题三"><span class="nav-number">2.3.</span> <span class="nav-text">问题三</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题四"><span class="nav-number">2.4.</span> <span class="nav-text">问题四</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题五"><span class="nav-number">2.5.</span> <span class="nav-text">问题五</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题六"><span class="nav-number">2.6.</span> <span class="nav-text">问题六</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题七"><span class="nav-number">2.7.</span> <span class="nav-text">问题七</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题八"><span class="nav-number">2.8.</span> <span class="nav-text">问题八</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题九"><span class="nav-number">2.9.</span> <span class="nav-text">问题九</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题十"><span class="nav-number">2.10.</span> <span class="nav-text">问题十</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题十一"><span class="nav-number">2.11.</span> <span class="nav-text">问题十一</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题十二"><span class="nav-number">2.12.</span> <span class="nav-text">问题十二</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题十三"><span class="nav-number">2.13.</span> <span class="nav-text">问题十三</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题十四"><span class="nav-number">2.14.</span> <span class="nav-text">问题十四</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题十五"><span class="nav-number">2.15.</span> <span class="nav-text">问题十五</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题十六"><span class="nav-number">2.16.</span> <span class="nav-text">问题十六</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题十七"><span class="nav-number">2.17.</span> <span class="nav-text">问题十七</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题十八"><span class="nav-number">2.18.</span> <span class="nav-text">问题十八</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题十九"><span class="nav-number">2.19.</span> <span class="nav-text">问题十九</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题二十"><span class="nav-number">2.20.</span> <span class="nav-text">问题二十</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题二十一"><span class="nav-number">2.21.</span> <span class="nav-text">问题二十一</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题二十二"><span class="nav-number">2.22.</span> <span class="nav-text">问题二十二</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题二十三"><span class="nav-number">2.23.</span> <span class="nav-text">问题二十三</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题二十四"><span class="nav-number">2.24.</span> <span class="nav-text">问题二十四</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题二十五"><span class="nav-number">2.25.</span> <span class="nav-text">问题二十五</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#问题二十六"><span class="nav-number">2.26.</span> <span class="nav-text">问题二十六</span></a></li></ol></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">© <span itemprop="copyrightYear">2020</span><span class="with-love"><i class="fa fa-heart"></i></span> <span class="author" itemprop="copyrightHolder">shenzekun</span></div><div class="theme-info"><i class="fa fa-pencil"></i> <span class="post-count">博客全站共 40.7k 字</span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/js/src/utils.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/motion.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.2"></script><script type="text/javascript">!function(e,t){var n,c=e.getElementsByTagName(t)[0];"function"!=typeof LivereTower&&((n=e.createElement(t)).src="https://cdn-city.livere.com/js/embed.dist.js",n.async=!0,c.parentNode.insertBefore(n,c))}(document,"script")</script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="popoverlay">').css("overflow","hidden"),$(".popup").toggle()}var isfetched=!1,search_path="search.xml";0==search_path.length&&(search_path="search.xml");var path="/"+search_path,searchFunc=function(e,t,a){"use strict";$.ajax({url:e,dataType:"xml",async:!0,success:function(e){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var r=$("entry",e).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get(),c=document.getElementById(t),n=document.getElementById(a);c.addEventListener("input",function(){var e=0,t='<ul class="search-result-list">',a=this.value.trim().toLowerCase().split(/[\s\-]+/);n.innerHTML="",this.value.trim().length>1&&r.forEach(function(r){var c=!1,n=r.title.trim().toLowerCase(),s=r.content.trim().replace(/<[^>]+>/g,"").toLowerCase(),o=decodeURIComponent(r.url),i=-1,l=-1,p=-1;if(""!=n&&a.forEach(function(e,t){i=n.indexOf(e),l=s.indexOf(e),(i>=0||l>=0)&&(c=!0,0==t&&(p=l))}),c){e+=1,t+="<li><a href='"+o+"' class='search-result-title'>"+n+"</a>";var h=r.content.trim().replace(/<[^>]+>/g,"");if(p>=0){var u=p-20,d=p+80;u<0&&(u=0),0==u&&(d=50),d>h.length&&(d=h.length);var f=h.substring(u,d);a.forEach(function(e){var t=new RegExp(e,"gi");f=f.replace(t,'<b class="search-keyword">'+e+"</b>")}),t+='<p class="search-result">'+f+"...</p>"}t+="</li>"}}),t+="</ul>",0==e&&(t='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'),""==a&&(t='<div id="no-result"><i class="fa fa-search fa-5x" /></div>'),n.innerHTML=t}),proceedsearch()}})};$(".popup-trigger").click(function(e){e.stopPropagation(),0==isfetched?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(function(e){$(".popup").hide(),$(".popoverlay").remove(),$("body").css("overflow","")}),$(".popup").click(function(e){e.stopPropagation()})</script><script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script><script>AV.initialize("Cc9hxvKgB63w6aMIIBCV2Bfz-gzGzoHsz","mBmolCuukl1GN11A7m8VQj9f")</script><script>function showTime(e){var t=new AV.Query(e),n=[],o=$(".leancloud_visitors");o.each(function(){n.push($(this).attr("id").trim())}),t.containedIn("url",n),t.find().done(function(e){if(0!==e.length){for(c=0;c<e.length;c++){var t=e[c],i=t.get("url"),s=t.get("time"),l=document.getElementById(i);$(l).find(".leancloud-visitors-count").text(s)}for(var c=0;c<n.length;c++){var i=n[c],l=document.getElementById(i),r=$(l).find(".leancloud-visitors-count");""==r.text()&&r.text(0)}}else o.find(".leancloud-visitors-count").text(0)}).fail(function(e,t){console.log("Error: "+t.code+" "+t.message)})}function addCount(e){var t=$(".leancloud_visitors"),n=t.attr("id").trim(),o=t.attr("data-flag-title").trim(),i=new AV.Query(e);i.equalTo("url",n),i.find({success:function(t){if(t.length>0){var i=t[0];i.fetchWhenSave(!0),i.increment("time"),i.save(null,{success:function(e){$(document.getElementById(n)).find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to save Visitor num, with error message: "+t.message)}})}else{var s=new e,l=new AV.ACL;l.setPublicReadAccess(!0),l.setPublicWriteAccess(!0),s.setACL(l),s.set("title",o),s.set("url",n),s.set("time",1),s.save(null,{success:function(e){$(document.getElementById(n)).find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to create")}})}},error:function(e){console.log("Error:"+e.code+" "+e.message)}})}$(function(){var e=AV.Object.extend("Counter");1==$(".leancloud_visitors").length?addCount(e):$(".post-title-link").length>1&&showTime(e)})</script><script>!function(){var t=document.createElement("script"),e=window.location.protocol.split(":")[0];t.src="https"===e?"https://zz.bdstatic.com/linksubmit/push.js":"http://push.zhanzhang.baidu.com/push.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}()</script></body></html>