Question

我正在尝试构建一个可在React Navigation中使用的通知服务；我走了多远？

现在这是一个模态，卡元素已被隐藏，然后视图样式仅填充到元素顶部的15％，并且如果您单击该元素的白色区域，该元素将做出反应。通知。

这是NotificationModal的代码：

import React from 'react';
import { View, TouchableHighlight,TouchableWithoutFeedback } from 'react-native';
import { Text } from 'react-native-elements';

export default class NotificationModal extends React.Component {

    static navigationOptions = ({ navigation }) => {
        const title = navigation.getParam('title','No item found...');
        return {
            title: title
        };
    };

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        console.log(this.props);
    }

    render() {
        const { navigation } = this.props;
        let title = navigation.getParam('title', '');
        return (
            <TouchableWithoutFeedback>
                <View style={{ flex: 1 ,flexDirection: 'column', justifyContent: 'flex-start'}}>
                    <View style={{ height: "15%" ,width: '100%', backgroundColor:"#fff", justifyContent:"center"}}>
                        <Text style={{fontSize:25}}>{title}xd</Text>
                    </View>
                    <TouchableHighlight onPress={() => { this.props.navigation.goBack(); }} style={{backgroundColor: "rgba(0,0,0,0)"}}>
                        <View style={{ height: "85%" ,width: '100%', backgroundColor: "rgba(0,0,0,0)", justifyContent:"center"}}>
                            <View>
                            </View>
                        </View>
                    </TouchableHighlight>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

在我的根导航堆栈中，它看起来像这样：

export default RootStack = createStackNavigator(
    {
        Main: {
            screen: MainStack,
        },
        QuickStockModal: {
            screen: StockModal,
        },
        NotificationModal: {
            screen: NotificationModal,
        }
    },
    {
        mode: 'modal',
        headerMode: 'none',
        cardStyle:{
            backgroundColor:"transparent",
            opacity:0.99
        }
    }
);

最后，我将此伪通知模式称为任何其他导航实例：

this.props.navigation.navigate('NotificationModal', {
            title: 'test'
        });

问题

它不会只是快速更新，它将超越触摸区域，我只想让用户知道诸如“搜索结果为空”或“条形码无效”之类的东西，而不会劫持触摸。（但能够在可见的白色区域内触摸通知按钮）
当您按下外部区域以将其关闭时，“关闭区域”会随着消失而变暗，这看起来很糟糕，我希望将动画更改为向上推而不是向下推，并希望避免这种情况
这是一种发送通知的麻烦方式，但是其他方式会使我当前的应用程序设计过于复杂（例如，使用Redux，仅尝试添加应用程序内通知就需要大量工作）
应用内通知会释放可自定义的内容，甚至会让人无法正常工作

在React Navigation中从模态构建通知

0 个答案: