Blocking problem on the keyboard:
WindowSoftInputMode see the value of Android manifests in, you can have multiple values common decision.
- adjustPan: do not try to get your content, but will be blocking your keyboard input box,
- adjustResize: automatically adjusts not block your content, but your content will be deformed. Extruded.
This time you can adjust the keyboard to use the official shielding components KeyboardAvoidingView on the inside content will not be obscured. This is the official solution to the
About fetch the post
Usually we are on the web directly submitted in the form of direct, no learned many details of what we rn but not the same, our network through fetch request is done, he has the following structure
let formData = new FormData () ;
formData.append ( "name", "ADMIN");
formData.append ( "password", "admin123");
FETCH (URL, {
Method: 'the POST',
headers: {},
body: formData,
.}) the then ((Response) => {
IF (response.ok) {
return response.json ();
}
}) the then. ((json) => {
Alert (JSON.stringify (json));
}) the catch ((error) => {.
console.error (error);
});
but it is still quite straightforward is not it, if you so look, you're wrong, because I did not go to fetch the official documentation (ps: I do not understand in English), we can see the increase of the back body parameter is formData, directly explain it, the form on our website the value of the body will be automatically converted when submitting the form formData, but it will not fetch, so here we have a new direct formData objects, and then into the body of the request body.
Click achieve input box blank so that loses focus (often used in login and registration page or other pages need to submit the form)
Mainly achieved by ref, to add input ref, add a click event in the outermost touchableOpacity, loses focus when clicked The following is a simple code to achieve:
export default class createCollection extends Component {
async click() {
this.refs.input1.blur();
this.refs.input2.blur();
}
render() {
return (
<View style={style.body}>
<TouchableOpacity
activeOpacity={1}
onPress={() => {
this.click();
}}
style={style.touchalbe}
>
<View style={
style.content
}>
<Fumi
ref={'input1'}
label={'Item Name'}
iconClass={Icon}
iconName={'subtitles'}
iconColor={'#f95a25'}
iconSize={20}
iconWidth={40}
/>
<Fumi
ref={'input2'}
label={'Item Kind'}
iconClass={Icon}
iconName={'textsms'}
iconColor={'#f95a25'}
iconSize={20}
iconWidth={40}
/>
</View>
</TouchableOpacity>
</View>
)
}
}
I use the above package had input box Fumi (from a nice third party library called the react-native-textinput-effects), it is the usual input. Mainly to see the logic to realize it, this is very simple. ps: I did not write the import in, if you need to own import Ha
If the react-native-elements, inside the header a bit of a problem on Android
Specific display title bar very high (because the size of the status bar also go into a) specific solutions:
<Header
statusBarProps={{ translucent: true, backgroundColor: 'transparent' }}
/>
Add this property can be good, specific meaning is to hide the status bar.