[react native] rn step on the pit practice - starting from the input box "men"

　　Because the team's technology stack was changed to react native, the code for rn began to be written. Although rn and react share the same origin, due to many interactions and changes related to native, there are still many problems in actual use, so With this series, the first article should be about how to build a development and debugging environment, but the amount of information is too large, and the author is not too satisfied with the current development and debugging environment, so here is the right to press the table, and I will never encounter it. Let's start writing the first fully resolved problem.

　　In fact, the requirement is very simple, that is, to implement multiple input components, allowing users to input multiple sets of data. When the user has input content, a "clear" button appears on the right side. When the user clicks, the previously input content is cleared. The style is as follows :

　　After writing the react code that is basically the same as in H5, it behaves strangely in native:

　　Because when there is data in the input, the mobile phone will pop up the keyboard by default, and when the user tries to click the "Clear" button, the keyboard will be put away by default for the first time, and the second click will make the clear function take effect .

　　Although there is no problem with this logic logically, the interactive experience is too strange . After querying, I found that it was caused by the author nesting the input component in the ScrollView component, because the ScrollView component in RN was considered by default in the design. Whether to put away the soft keyboard when you click (for example, to trigger scrolling), and its default state is put away, but in my scenario, I don't want such a "feature" to take effect. Check the documentation and find that you need to set this Attributes:

　　When set to handled, the keyboard will not be automatically closed when the click event is captured by the child component.

　　But just setting it is not enough, because now the keyboard will not be put away, we need to actively trigger the event of the keyboard put up, that is, we need to add the TouchableWithoutFeedback component in the ScrollView, add an onPresss event to it, and call Keyboard when responding. dismiss().

　　The whole experience is much better. The code is shown below:

<ScrollView keyboardShouldPersistTaps="handled">
    <TouchableWithoutFeedback style={{flex: 1}} onPress={()=>{
        Keyboard.dismiss();
    }}
        <InputItem />
        ......
        <InputItem /> 
    </TouchableWithoutFeedback>
</ScrollView>

　　The InputItem is the author's custom component (that is, the TextInput component with another "clear" button mentioned above).

　　Before the end of the article, the author encountered a problem of "abnormal line wrapping" on android in the RN text component (similar to the phenomenon of H5), but RN does not have an attribute similar to "word-wrap", how to fix it? Have to read the document carefully. .