deploy: 850faf4c6934ac6a7bd99a26948c2e3f7bed6c9a

1 files changed, 255 insertions, 0 deletions

diff --git a/2024/01/22/Rescript-React-Native/index.html b/2024/01/22/Rescript-React-Native/index.html
new file mode 100644
index 00000000..47775070
--- /dev/null
+++ b/2024/01/22/Rescript-React-Native/index.html
@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+<meta name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <meta name="author" content="韩暮秋">
+
+
+    <meta name="subtitle" content="暮秋小屋">
+
+
+    <meta name="description" content="这里是暮秋小屋，思念和灵感的寄存处">
+
+
+    <meta name="keywords" content="韩暮秋,MuqiuHan">
+
+
+
+
+<title>Rescript React Native | 暮秋小屋</title>
+
+
+
+
+
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=Roboto+Mono&display=swap');
+</style>
+
+
+
+    <!-- stylesheets list from _config.yml -->
+    
+    <link rel="stylesheet" href="/css/style.css">
+    
+
+
+
+
+    <!-- scripts list from _config.yml -->
+    
+    <script src="/js/frame.js"></script>
+    
+
+
+
+
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+
+
+
+
+
+
+
+  <meta name="generator" content="Hexo 6.3.0"></head>
+  <body>
+    <div class="mask-border">
+    </div>
+
+    <div class="wrapper">
+
+      <div class="header">
+  <div class="flex-container">
+    <div class="header-inner">
+      <div class="site-brand-container">
+        <a href="/">
+          
+            暮秋小屋
+          
+        </a>
+      </div>
+      <div id="menu-btn" class="menu-btn" onclick="toggleMenu()">
+        Menu
+      </div>
+      <nav class="site-nav">
+        <ul class="menu-list">
+          
+            
+              <li class="menu-item">
+                <a href="/">主页</a>
+              </li> 
+                   
+          
+            
+              <li class="menu-item">
+                <a href="/categories/gallery/">日记本</a>
+              </li> 
+                   
+          
+            
+              <li class="menu-item">
+                <a href="/tags/Medicine/">医学</a>
+              </li> 
+                   
+          
+            
+              <li class="menu-item">
+                <a href="/tags/Technique/">计算机科学</a>
+              </li> 
+                   
+          
+            
+              <li class="menu-item">
+                <a href="/tags/Life/">生活</a>
+              </li> 
+                   
+          
+            
+              <li class="menu-item">
+                <a href="/about">关于</a>
+              </li> 
+                   
+          
+          
+        </ul>
+      </nav>
+    </div>
+  </div>
+</div>
+
+
+      <div class="main">
+        <div class="flex-container">
+          <article id="post">
+
+  
+    <div class="post-head">
+    <div class="post-info">
+        <div class="tag-list">
+            
+                
+                    <span class="post-tag">
+                        <a href="/tags/Technique/">
+                            Technique
+                        </a>
+                    </span>    
+                
+                    <span class="post-tag">
+                        <a href="/tags/Rescript/">
+                            Rescript
+                        </a>
+                    </span>    
+                           
+            
+        </div>
+        <div class="post-title">
+            
+            
+                Rescript React Native
+            
+            
+        </div>
+        <span class="post-date">
+            Jan 22, 2024
+        </span>
+    </div>
+    <div class="post-img">
+        
+            <div class="h-line-primary"></div>
+              
+    </div>
+</div>
+    <div class="post-content">
+    <p>Rescript 对 React Native 的支持还算可以，但如今的 RN 已经是 Expo 的 RN 了，所以仍然有些落后，在这个 template 中，我测试了 rescript + rescript-react-native + expo + nativewind 的组合，可以跑起来：</p>
+<ul>
+<li><a target="_blank" rel="noopener" href="https://github.com/muqiuhan/rescript-react-native-expo-nativewind-template">muqiuhan&#x2F;rescript-react-native-expo-nativewind-template</a></li>
+</ul>
+<p>其中有两个问题，一是 <a target="_blank" rel="noopener" href="https://github.com/rescript-bindings/expo">rescript-expo</a> 对 rescript v11 的兼容性，我通过简单的注释让其通过编译:</p>
+<ul>
+<li><a target="_blank" rel="noopener" href="https://github.com/muqiuhan/expo/commit/918e9578f2a991450821760352c2445c4866f0d8">[Fix]: DocumentPicker type options</a></li>
+</ul>
+<p>二是对于 nativewind 的支持，编写的 binding 非常丑陋：</p>
+<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">type default_style = &#123;</span><br><span class="line">  className?: string,</span><br><span class="line">  children?: React.element,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">@module(&quot;nativewind&quot;)</span><br><span class="line">external styled: React.component&lt;&#x27;a&gt; =&gt; React.component&lt;default_style&gt; = &quot;styled&quot;</span><br><span class="line"></span><br><span class="line">module StyledText = &#123;</span><br><span class="line">  let make = styled(ReactNative.Text.make)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">module StyledView = &#123;</span><br><span class="line">  let make = styled(ReactNative.View.make)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">module StyledImage = &#123;</span><br><span class="line">  type props = &#123;</span><br><span class="line">    source?: string,</span><br><span class="line">    ...default_style,</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  @module(&quot;nativewind&quot;)</span><br><span class="line">  external styled: React.component&lt;&#x27;a&gt; =&gt; React.component&lt;props&gt; = &quot;styled&quot;</span><br><span class="line"></span><br><span class="line">  let make: React.component&lt;props&gt; = styled(ReactNative.Image.make)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>而这似乎并没有好的解决方案，理想中的实现应该是：</p>
+<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">module Styled = (Component: &#123;</span><br><span class="line">  type params // or type params = &#x27;a</span><br><span class="line">  let make: React.component&lt;props&gt;</span><br><span class="line">&#125;) =&gt; &#123;</span><br><span class="line">  type props = &#123;</span><br><span class="line">    ...Component.props, // This can&#x27;t work as it is not defined as record</span><br><span class="line">    className?: string</span><br><span class="line">  &#125;</span><br><span class="line">  @module(&quot;nativewind&quot;)</span><br><span class="line">  external styled: React.component&lt;Component.props&gt; =&gt; React.component&lt;props&gt; = &quot;styled&quot;</span><br><span class="line"></span><br><span class="line">  let make: React.component&lt;props&gt; = styled(Component.make)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>或者退一步:</p>
+<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">type styledProps = &#123;</span><br><span class="line">  className?: string,</span><br><span class="line">  // ...</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">@module(&quot;nativewind&quot;)</span><br><span class="line">  external styled: React.component&lt;&#x27;a&gt; =&gt; React.component&lt;&#x27;b&gt; = &quot;styled&quot;</span><br><span class="line"></span><br><span class="line">module StyledText = &#123;</span><br><span class="line">  type props = &#123;</span><br><span class="line">    ...ReactNative.Text.props,</span><br><span class="line">    ...styledProps</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  let make: React.component&lt;props&gt; = styled(ReactNative.Text.make)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>但这在当前的 rescript 中，根本无法实现。</p>
+<p>详细的讨论看这个帖子：</p>
+<ul>
+<li><a target="_blank" rel="noopener" href="https://forum.rescript-lang.org/t/how-to-use-nativewind-in-rescript-react-native/5005">How to use Nativewind in Rescript React Native</a></li>
+</ul>
+
+</div> 
+
+<script>
+    window.onload = detectors();
+</script>
+    <div class="post-footer">
+    <div class="h-line-primary"></div>
+    <nav class="post-nav">
+        <div class="prev-item">
+           
+                <div class="icon arrow-left"></div>
+                <div class="post-link">
+                    <a href="/2024/01/23/%E4%BA%8C%E3%80%87%E4%BA%8C%E5%9B%9B%E5%B9%B4%E4%B8%80%E6%9C%88%E4%BA%8C%E5%8D%81%E4%B8%89%E6%97%A5/">Prev</a>
+                </div>
+            
+        </div>
+        <div class="next-item">
+            
+                <div class="icon arrow-right"></div>
+                <div class="post-link">
+                  <a href="/2024/01/18/OCaml-News-2024-2/">Next</a>  
+                </div>  
+            
+        </div>
+    </nav>
+</div>
+
+    
+      <div class="post-comment">
+
+     
+
+     
+    
+    
+
+</div>
+     
+  
+</article>
+        </div>
+      </div>
+      
+      <div class="footer">
+    <div class="flex-container">
+        <div class="footer-text">
+            
+            
+                 | 
+            
+            
+                希望路过的人可以添点柴火让这里暖和点
+                
+        </div>
+    </div>
+</div>
+
+    </div>
+
+    
+    
+
+  </body>
+</html>