TextInput исчезает внутри ScrollView React Native

#react-native #scrollview #textinput #react-native-scrollview #react-native-textinput

Вопрос:

Сценарий: Я хочу добиться ситуации, подобной приведенному ниже коду. Где будут:

  • Многострочный TextInput с другими компонентами, и экран будет прокручиваться.
  • Я не хочу TextInput , чтобы его можно было прокручивать.

Проблема: Что происходит, так это то , что после написания определенного количества строк в TextInput тексте тексты исчезают. Я все еще могу выделить текст и получить предложение на клавиатуре. Это похоже на тексты, и TextInput они стали прозрачными. После TextInput достижения высоты экрана телефона возникает эта проблема.

Является ли это ошибкой React-Native? или я что-то здесь делаю не так?

Примечание: Я использую "expo": "~40.0.0" . Кроме того, приведенный ниже код предназначен только для описания ситуации, а не для фактического кода.

 return (
  <ScrollView>
    <View style={styles.block} />
    <View style={styles.block} />
    <TextInput
      value={content}
      onChangeText={setContent}
      placeholder="Start writing from here"
      multiline
    />
    <View style={styles.block} />
    <View style={styles.block} />
  </ScrollView>
);

const styles = StyleSheet.create({
  block: {
    height: 200,
    backgroundColor: 'blue',
  },
});
 

Ответ №1:

Попробуйте любой из следующих обходных путей:

  • Включение прокрутки включено на вводе текста
  • Явная установка высоты ввода текста (например, путем динамического измерения содержимого)
 <ScrollView scrollEnabled style={{ marginTop: 100 }}>
  <TextInput multiline placeholder="type here" scrollEnabled={true} />
</ScrollView>
 

Комментарии:

1. Вы можете удалить дополнительные виды и попробовать указать высоту для ввода текста напрямую.