diff options
Diffstat (limited to '2024/01/22')
| -rw-r--r-- | 2024/01/22/Rescript-React-Native/index.html | 5 |
1 files changed, 1 insertions, 4 deletions
diff --git a/2024/01/22/Rescript-React-Native/index.html b/2024/01/22/Rescript-React-Native/index.html index 9fb50113..7e0b1d15 100644 --- a/2024/01/22/Rescript-React-Native/index.html +++ b/2024/01/22/Rescript-React-Native/index.html @@ -194,7 +194,7 @@ <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/rescript-react-native-expo-nativewind-template</a></li> +<li><a target="_blank" rel="noopener" href="https://github.com/muqiuhan/rescript-react-native-expo-nativewind-template">muqiuhan/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> @@ -202,13 +202,10 @@ </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 = {</span><br><span class="line"> className?: string,</span><br><span class="line"> children?: React.element,</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">@module("nativewind")</span><br><span class="line">external styled: React.component<'a> => React.component<default_style> = "styled"</span><br><span class="line"></span><br><span class="line">module StyledText = {</span><br><span class="line"> let make = styled(ReactNative.Text.make)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">module StyledView = {</span><br><span class="line"> let make = styled(ReactNative.View.make)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">module StyledImage = {</span><br><span class="line"> type props = {</span><br><span class="line"> source?: string,</span><br><span class="line"> ...default_style,</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> @module("nativewind")</span><br><span class="line"> external styled: React.component<'a> => React.component<props> = "styled"</span><br><span class="line"></span><br><span class="line"> let make: React.component<props> = styled(ReactNative.Image.make)</span><br><span class="line">}</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: {</span><br><span class="line"> type params // or type params = 'a</span><br><span class="line"> let make: React.component<props></span><br><span class="line">}) => {</span><br><span class="line"> type props = {</span><br><span class="line"> ...Component.props, // This can't work as it is not defined as record</span><br><span class="line"> className?: string</span><br><span class="line"> }</span><br><span class="line"> @module("nativewind")</span><br><span class="line"> external styled: React.component<Component.props> => React.component<props> = "styled"</span><br><span class="line"></span><br><span class="line"> let make: React.component<props> = styled(Component.make)</span><br><span class="line">}</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 = {</span><br><span class="line"> className?: string,</span><br><span class="line"> // ...</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">@module("nativewind")</span><br><span class="line"> external styled: React.component<'a> => React.component<'b> = "styled"</span><br><span class="line"></span><br><span class="line">module StyledText = {</span><br><span class="line"> type props = {</span><br><span class="line"> ...ReactNative.Text.props,</span><br><span class="line"> ...styledProps</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> let make: React.component<props> = styled(ReactNative.Text.make)</span><br><span class="line">}</span><br></pre></td></tr></table></figure> - <p>但这在当前的 rescript 中，根本无法实现。</p> <p>详细的讨论看这个帖子：</p> <ul> |