美文网首页
react-navigation stack中使用Keyboar

react-navigation stack中使用Keyboar

作者: Jr_38e7 | 来源:发表于2020-06-29 15:44 被阅读0次

    在react-navigation中,如果直接使用KeyboardAvoidingView,由于顶部的header问题需要设置keyboardVerticalOffset的值(例如,iOS为64,Android为54 + StatusBar.currentHeight,iPhone X,iPad,水平iPhone X的特殊情况...),不然需要自定义Header,这里提供一种方案,由页面内引入Header:

    import { Header } from '@react-navigation/stack'
    
    export default ({navigation}) => {
        const [headerProps, setHeaderProps] = useState(null)
        useEffect(() => {
            /* 利用navigation的header属性,把header的props传给页面的Header组件*/
            navigation.setOptions({
                header: (props) => {
                    setHeaderProps(props)
                    return null
                },
            })
        })
    
        return (
            <View style={{ flex: 1 }}>
                {headerProps && <Header {...headerProps} />}
                <View style={{ flex: 1 }}></View>
                <KeyboardAvoidingView behavior="padding" >
                    {/* TextInput... */}
                </KeyboardAvoidingView>
            </View>
        )
    }
    

    相关文章

      网友评论

          本文标题:react-navigation stack中使用Keyboar

          本文链接:https://www.haomeiwen.com/subject/ktlfwctx.html