#react-native #react-native-ios
#react-native #react-native-ios
Вопрос:
Я пытаюсь создать заполняющий пробел для абзаца с результатом рендеринга React Native
Однако всякий раз, когда я ввожу символ, клавиатура автоматически закрывается.
Я использую 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>
)
} Интересно, что-то не так в моем коде или есть другой подход с представлением вместо текста, который может привести к тому же результату?
Обновление: всякий раз, когда я пытался использовать более одного TextInput в текстовом компоненте, один из них приводил к сбою приложения (отладка показывает ошибку «Попытка получить метрики макета из загрязненного узла 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>
)
} Ответ №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>
Комментарии:
1. Я попытался использовать приведенный выше код непосредственно на App.js но проблема все еще существует.