React-Native ScrollView使TextInput消失

Question

Being pretty new to React Native, hopefully this is an obvious oversight, but I've experimented and not found a solution. It's a pretty straightforward problem: when I have a couple of Views and a TextInput, everything lays out as expected. When I wrap them in a ScrollView, the Views remain but the TextInput no longer renders. I have not been able to figure out why.

To test and share it I created an rnplay app here: https://rnplay.org/apps/P774EQ

As you can see, the text in the Views wrapping the TextInput appear as expected, but the TextInput isn't there. If you just remove the ScrollView (lines 18 & 39), the TextInput appears.

Hopefully someone experienced will look at this and have an answer in a few seconds because I'm pretty sure I'm just missing something obvious. Thanks in advance.

Answer 1

1) Line17: style={styles.scrollview} => style={styles.scrollView} , you have a spell mistake.

2) Use contentContainerStyle for ScrollView ( for more details about contentContainerStyle )

<ScrollView keyboardDismissMode='interactive' style={styles.scrollview} contentContainerStyle={styles.contentContainerStyle}>

and here is the contentContainerStyle:

contentContainerStyle: {
    flex: 1,
}

3) The flex property of message style is better to set as .125 because the flex of inputcontainer is .75 .