时间戳

首页 > 解决方案 > 除非我进行更改并保存我的代码，否则 React Native Modal 不会显示

javascript - 除非我进行更改并保存我的代码，否则 React Native Modal 不会显示

问题描述

我正在为内置 react native 的手持设备开发商品应用程序。每当使用条形码扫描仪扫描产品时，我都想将其设置为选中状态，然后以模式为用户弹出产品详细信息。我遇到的问题是模式没有弹出，但现有的细节正在消失，如果我对 Modals 道具进行更改然后保存它，页面会重新加载并出现 Modal。

我觉得奇怪的另一件事是，如果我删除它<Modal>并让它切换到<View>它没有问题。

const OrderLineItem = ({item, finishEditingInQty}) => {

const {selected} = item

if(selected){
    console.log("Item selected")
    return (
        <Modal
            style={styles.centeredView}
            animationType="slide"
            transparent={true}
            visible={true}
        >
            <View style={styles.modalLineItemContainer}>
                <View style={styles.modalLineItem}>
                    <Text>SELECTED</Text>
                </View>
                <View style={styles.modalLineItem}>
                    <Text>{item.sageStockInfo.Barcode}</Text>
                </View>
                <Pressable
                    onPress={() => {
                        finishEditingInQty(item.LineID)
                    }}
                    style={({ pressed }) => [
                        {
                            backgroundColor: pressed
                            ? 'rgb(210, 230, 255)'
                            : 'white'
                        },
                        styles.orderListItem
                ]}>
                    <Text>Done</Text>
                </Pressable>
            </View>
        </Modal>
    )
} else {
    return (
        <View style={styles.lineItemContainer}>
            <View style={styles.lineItem}>
                <Text style={styles.lineItemText}>{item.ProductCode} - {item.ProductDescription}</Text>
            </View>
            <View style={styles.lineItem}>
                <Text style={styles.lineItemText}>Outstanding: {item.Quantity}</Text>
                <Text style={styles.lineItemText}>In Qty: {item.inQty}</Text>
            </View>
            <View style={styles.lineItem}>
                <Text style={styles.lineItemText}>Warehouse: {item.Warehouse}</Text>
            </View>
            <View style={styles.lineItem}>
                <Text style={styles.lineItemText}>{item.sageStockInfo.Barcode}</Text>
            </View>
        </View>
    )
}

}

标签： javascriptreactjsreact-native

解决方案

您正在以一种非常奇怪的方式使用 Modal。当我想要一个模式时，在与此非常相似的代码中，我执行以下操作。

<View>
  <Modal
    visible={selected}
    ....
  >
    ...Modal content
  </Modal>
  ...other content displayed while modal is not up
</View>

如果模态是可见的，它会涵盖其他所有内容 - 它是一个模态，这就是它应该做的。不需要有逻辑来确定要显示的视图。如果您打算走那条路，因为它对您或其他人更有意义，那么请不要使用模式 - 那些专门用于在当前显示的屏幕上显示模式屏幕 - 只需使用您提到的视图。

希望这会有所帮助。

推荐阅读