<input>和<textarea></textarea>未在 native-base 中對齊，React Native&lt;/div&gt;<div id="text_translate"><p> 我想使用原生基礎將單行輸入和多行輸入放入表單中，但它們未正確對齊垂直線。 有什么我遺漏的或者不應該一起使用的嗎？ 謝謝你。</p><p> package.json 的一部分</p><pre> "expo": "~37.0.3", "native-base": "2.13.8", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",</pre><p> 我的代碼</p><pre class="lang-js prettyprint-override"> &lt;Content padder&gt; &lt;Form&gt; &lt;Item regular floatingLabel&gt; &lt;Label style={{paddingTop: 2}}&gt;Label&lt;/Label&gt; &lt;Input onChangeText={url =&gt; setUrl(url)}/&gt; &lt;/Item&gt; &lt;Textarea rowSpan={5} onChangeText={content =&gt; setContent(content)} bordered placeholder="this is textarea" /&gt; &lt;/Form&gt; &lt;/Content&gt;</pre><p> <a href="https://i.stack.imgur.com/gSyge.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gSyge.png" alt="模擬器截圖"></a></p><p> ========已編輯</p><p>我找到了答案，只需將 floatingLabel 替換為常規。 但是，占位符仍未對齊。</p><pre class="lang-js prettyprint-override"> &lt;Item regular&gt; &lt;Label&gt;URL&lt;/Label&gt; &lt;Input onChangeText={url =&gt; setUrl(url)}/&gt; &lt;/Item&gt;</pre><p> <a href="https://i.stack.imgur.com/kWwZs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kWwZs.png" alt="在此處輸入圖像描述"></a></p></div>

Question

我想使用原生基礎將單行輸入和多行輸入放入表單中，但它們未正確對齊垂直線。 有什么我遺漏的或者不應該一起使用的嗎？ 謝謝你。

package.json 的一部分

    "expo": "~37.0.3",
    "native-base": "2.13.8",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",

我的代碼

      <Content padder>
        <Form>
          <Item regular floatingLabel>
            <Label style={{paddingTop: 2}}>Label</Label>
            <Input onChangeText={url => setUrl(url)}/>
          </Item>
          <Textarea
            rowSpan={5}
            onChangeText={content => setContent(content)}
            bordered
            placeholder="this is textarea"
          />
        </Form>
      </Content>

========已編輯

我找到了答案，只需將 floatingLabel 替換為常規。 但是，占位符仍未對齊。

          <Item regular>
            <Label>URL</Label>
            <Input onChangeText={url => setUrl(url)}/>
          </Item>

Answer 1

您必須在 textarea 的樣式中設置填充。

<Textarea style={{paddingLeft: over9000}}... />