Question

我正在尝试使用React Native为段落创建填充空白 Render result

但是，每当我输入一个字符时，键盘就会自动关闭。

我正在使用React Native 0.63.3

下面是我的App.js代码：

import React, { useState } from 'react'
import { StyleSheet, Text, TextInput, View } from 'react-native'


export default function App() {
  const [txt, setTxt] = useState('');

  return (
    <View style={{ marginTop: 44 }}>
      <Text>
        <View style={{ height: 20, width: 100, borderWidth: 1, borderColor: 'black' }} >
          <TextInput value={txt} onChangeText={setTxt} />
        </View>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper volutpat velit id mollis. Nulla bibendum congue malesuada. Phasellus scelerisque est quis lacinia porta. Etiam sit amet vehicula nisl. Sed porttitor vestibulum tellus, ac convallis quam pulvinar sit amet. Suspendisse ac consequat ante. Duis cursus, leo a hendrerit efficitur, libero nisi tristique erat, cursus venenatis est tellus eget nisi. Etiam dictum, tellus sed ultrices mattis, lectus quam convallis sem, cursus maximus turpis nisl id nulla. Vestibulum pharetra erat at velit tempor, vitae interdum turpis blandit.
         </Text>
    </View>
  )
}

我想知道我的代码中是否有错误，还是使用View而不是Text来产生相同的结果？

更新：每当我尝试使用多个TextInput in Text组件时，其中之一将使应用程序崩溃（调试显示错误“试图从肮脏的Yoga节点获取布局指标”）

import React, { useState } from 'react'
import { StyleSheet, Text, TextInput, View } from 'react-native'


export default function App() {
  const [txt, setTxt] = useState('');

  return (
    <View style={{ marginTop: 44, flex: 1 }}>
      <Text style={{ flex: 1 }}>
        <View
          style={{
            height: 20,
            width: 100,
            borderWidth: 1,
            borderColor: 'black',
          }}
        >
          <TextInput
            autoCorrect={false}
            value={txt}
            onChangeText={setTxt}
          />
        </View>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper
      volutpat velit id mollis. Nulla bibendum congue malesuada. Phasellus
      scelerisque est quis lacinia porta. Etiam sit amet vehicula nisl. Sed
      porttitor vestibulum tellus, ac convallis quam pulvinar sit amet.
      Suspendisse ac consequat ante. Duis cursus, leo a hendrerit efficitur,
      libero nisi tristique erat, cursus venenatis est tellus eget nisi. Etiam
      dictum, tellus sed ultrices mattis, lectus quam convallis sem, cursus
      maximus turpis nisl id nulla. Vestibulum pharetra erat at velit tempor,
      vitae interdum turpis blandit uhm.
      <View
          style={{
            height: 20,
            width: 100,
            borderWidth: 1,
            borderColor: 'black',
          }}
        >
          <TextInput
            autoCorrect={false}
            value={txt}
            onChangeText={setTxt}
          />
        </View>
      </Text>
    </View>
  )
}

Answer 1

添加flex：文本标签样式为1。如果这是您的主屏幕，则还应该在最上方的视图中添加flex：1

<View style={{ marginTop: 44, flex: 1, backgroundColor: 'red' }}>
  <Text style={{ flex: 1 }}>
    <View
      style={{
        height: 20,
        width: 100,
        borderWidth: 1,
        borderColor: 'black',
      }}
    >
      <TextInput
        style={{ zIndex: 999 }}
        value={txt}
        onChangeText={setTxt}
      />
    </View>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper
    volutpat velit id mollis. Nulla bibendum congue malesuada. Phasellus
    scelerisque est quis lacinia porta. Etiam sit amet vehicula nisl. Sed
    porttitor vestibulum tellus, ac convallis quam pulvinar sit amet.
    Suspendisse ac consequat ante. Duis cursus, leo a hendrerit efficitur,
    libero nisi tristique erat, cursus venenatis est tellus eget nisi. Etiam
    dictum, tellus sed ultrices mattis, lectus quam convallis sem, cursus
    maximus turpis nisl id nulla. Vestibulum pharetra erat at velit tempor,
    vitae interdum turpis blandit.
  </Text>
</View>

每次输入（IOS）后，Text组件内部的TextInput失去焦点

1 个答案: