Solving the problem of react-native keyboard occlusion input Box

The problem in Rn to solve the keyboard occlusion input box actually has many ways, here just records some of them used in the actual development.

Way one, using the Scrollto method, which is also the simplest and most brutal, just need to calculate the distance of ScrollView scrolling and deal with some of the bug problems of experience. The general idea is that the component Render method uses ScrollView, and set ScrollView's Keyboardshouldpersisttaps={true} ( This step must not be less, if the property is missing, the next step will not work ), and then wrap all the remaining sub-views in ScrollView with a view as container, such as Text,touchablehighlight, and use Onstartshouldsetrespondercapture to intercept the view of the event, in order to resolve when clicking on the page button, the first click will only pick up the keyboard, the second click will respond to the button method of the bug. The ScrollView is then scrolled in the onfocus method of the TextInput, and the ScrollView scroll is resumed in onendediting. The following is the code in the specific implementation.

Implementation of the Render method:

Render:function () {

Return (
<view style={styles.container}>
<navigationbar title={' bind phone number '} Onbackpress={this.on Backpress}/>
<scrollview ref= ' scroll ' keyboardshouldpersisttaps={true} ;
<view style={styles.content} onstartshouldsetrespondercapture={( E) = = {
const TARGET = E.nativeevent.target;
if (target!== react.findnodehandle (this.refs.phoneInput) && target!== React.findnodehandle (this.refs.codeInput) {
This.refs.phoneInput.blur ();
This.refs.codeInput.blur ();
;

<textinput
style = {Styles.cardnumtext}
　　　　　　　　　　ref = ' Phoneinput '
Onfocus={this.scrollviewto.bind (This)}
onendediting={() =>{this.refs.scroll.scrollto (0)}}
OnChange = {This.cardNumberTextChanged.bind (this)}
placeholder = ' Please enter reserved phone number '
Placeholdertextcolor = ' #481A5C '
Keyboardtype = ' numeric '
/>

<view style = {styles.lineview}></view>

<touchablehighlight style = {Styles.topbutton} underlaycolor= ' #9B9B9B ' onpress = {This.jumpToNextPage.bind (this)} >
<text style = {styles.buttontext}> Send verification Code </Text>
</TouchableHighlight>
<textinput
style = {Styles.cardnumtext}
　　　　　　　　　　ref = ' Codeinput '
　　　　　　　　　　Onfocus={this.scrollviewto.bind (This)}
onendediting={() =>{this.refs.scroll.scrollto (0)}}
placeholder = ' Input Verification code '
Placeholdertextcolor = ' #999 '
OnChange = {this.cardnumbertextchanged}
Keyboardtype = ' Number-pad '
/>
<view style = {styles.lineview}></view>

<text style = {styles.protecttext}>
Xxxxxxxxxxxxxxxxxxx
</Text>

<touchablehighlight style = {Styles.downbutton} underlaycolor= ' #481A5C ' onpress = {This.jumpToNextPage.bind (this)} >
<text style = {styles.buttontext}> Next </Text>
</TouchableHighlight>
</View>
</ScrollView>
</View>);
}

The implementation of the ScrollViewTo method called when onfocus:

Scrollviewto:function (e) {
Let target = E.nativeevent.target;
Let scrolllength = 100;
if (target=== react.findnodehandle (this.refs.codeInput)) {
Scrolllength = 160;
}
This.refs.scroll.scrollTo (scrolllength);
},

Mode two, when using the view package, By setting the MarginTop property of the view and combining animations: Initialize the value of a state object Viewmargintop to set the margintop of the Animated.view and change the TextInput value when onfocus viewmargintop To restore or set a new margintop when onendediting. Specifically, the animated is introduced first, and the state method is initialized. (The change in the value of the state triggers the re-interaction of the relevant elements on the interface, with the same effect as Reactivecocoa)

Getinitialstate:function () {
return {
Viewmargintop:new animated.value (0),
};
},

Use Animated.view in a view that needs to rise, setting its mairgintop to Viewmargintop

<animated.view style={{margintop:this.state.viewmargintop}}>

Of course, it is not recommended to write the style here, this will cause each time to create a style, you should define the style to stylesheet

Your views and component

</Animated.View>

Then, in the Onfucos method, the Viewmargintop value is changed by animation, as follows

Animated.timing (
This.state.viewMarginTop,
{
tovalue:160,
DURATION:250,
}
). Start ();

To recover a value that only needs to be restored in onendediting with the same principle viewmargintop.

Mode three, through the monitoring ScrollView keyboard on the appearance and disappearance, in the appearance and disappearance of the method set a state value change, to set the ScrollView Contentinset, the method is only seen on GitHub, specifically I did not use that:

1. Add listening when the page is finished

Componentdidmount:function () {
Keyboard Events Monitoring
Deviceeventemitter.addlistener (' Keyboardwillshow ', this.updatekeyboardspace)
Deviceeventemitter.addlistener (' Keyboardwillhide ', this.resetkeyboardspace)
},

Componentwillunmount:function () {
Todo:figure out if removealllisteners are the right thing
Deviceeventemitter.removealllisteners (' Keyboardwillshow ')
Deviceeventemitter.removealllisteners (' Keyboardwillhide ')
},

Getinitialstate:function (props) {//Initialize variable
This.viewisinsidetabbar = False
return {
keyboardspace:0,
}
},

Keyboard actions
Updatekeyboardspace:function (frames) {
Const KEYBOARDSPACE = frames.endcoordinates.height//Get keyboard height
This.setstate ({
Keyboardspace:keyboardspace,
})
},

Resetkeyboardspace:function () {
This.setstate ({
keyboardspace:0,
})
},

Set the Contentinset of ScrollView

<scrollview
ref= ' Keyboardview '
Keyboarddismissmode= ' Interactive '
Contentinset={{bottom:this.state.keyboardspace}}
Showsverticalscrollindicator={true}
</ScrollView>

Solving the problem of react-native keyboard occlusion input Box