react-native学习总结与部分报错提示

关于键盘遮挡的问题：

看Android manifests中的windowSoftInputMode的值，可以有多个值共同决定。

adjustPan：不会往上挤你的内容，但是键盘会遮挡住你的输入框，
adjustResize：会自动调整不遮挡你的内容，但是你的内容会变形。被挤压的。
这个时候你就可以用官方给的调整键盘遮挡的组件KeyboardAvoidingView 放在这个里面的内容不会被遮挡住。这是官方给的解决办法

关于fetch的post

平时咱们在web上直接就用表单直接提交了，没有了解到许多细节，咱么的rn可是不一样的，咱们的网络请求是通过fetch来完成的，他的结构如下
let formData = new FormData();
formData.append(“name”,“admin”);
formData.append(“password”,“admin123”);

fetch(url , {
method: ‘POST’,
headers: {},
body: formData,
}).then((response) => {
if (response.ok) {
return response.json();
}
}).then((json) => {
alert(JSON.stringify(json));
}).catch((error) => {
console.error(error);
});
其实还是蛮简单明了的不是嘛，如果你这么看你就大错特错了，由于我没有去看fetch的官方文档（ps：全英文看不太懂），我们可以看到body参数后面加的是formData，直接解释吧，我们网页上的表单提交时body中的值会自动转化为formData的形式，但是fetch不会，所以这里我们直接new一个formData对象，再放到请求体body中。

实现点击空白处让输入框失去焦点（常用在登录与注册页面或者其他需要提交表单的页面）

主要实现是通过ref，给input添加ref，在最外层的touchableOpacity添加点击事件，当点击时失去焦点即可以下是简单的代码实现：

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>

        )
    }
}

上面我用的是封装过的输入框Fumi（来自一个好看的第三方库叫做react-native-textinput-effects），平常的是input。主要看逻辑实现就可以了，这个还是很简单的。ps：我没有把import写进来，大家如果有需要要自己import哈

如果用了react-native-elements，里面的header在安卓上有一点的问题

具体显示为标题栏很高（因为把状态栏的大小也放进去了）具体解决方案：

<Header
                    statusBarProps={{ translucent: true, backgroundColor: 'transparent' }}
                />

加上这个属性才能好，具体意思就是将状态栏隐藏。

qq_41742092