reactjs - 为什么移动浏览器不显示模态视图？

问题描述

我正在使用 React 本机 Web，我有一个模态视图，如下所示：

（我只引用退货部分，因为它主要是与设计相关的问题）

<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
  <View>
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <View
        style={{
          backgroundColor: 'white',
          height: '400px',
          width: '450px',
        }}>
        <Text
          style={{
            fontFamily: 'Roboto',
            fontWeight: 'bold',
            fontSize: 18,
            textAlign: 'center',
            padding: 20,
          }}>
          {name}
        </Text>
        <View
          style={{
            borderBottomColor: '#18D0E4',
            borderBottomWidth: 1,
          }}
        />
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            marginTop: '5%',
            padding: 20,
            margin: '5%',
          }}>
          {reminder == 6 && toggle == 6 ? (
            <TouchableOpacity style={{flexDirection: 'row'}}>
              <Image
                source={Images.circle}
                style={{
                  height: 15,
                  width: 15,
                  marginTop: '2%',
                  paddingRight: '1%',
                }}
              />
              <Text
                style={{
                  fontFamily: 'Roboto',
                  fontSize: 17,
                  color: '#000',
                  marginLeft: 5,
                }}>
                Set Different reminder
              </Text>
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              style={{flexDirection: 'row'}}
              onPress={() => reminderSet()}>
              <Image
                source={Images.circle_o}
                style={{
                  height: 15,
                  width: 15,
                  marginTop: '2%',
                  paddingRight: '1%',
                }}
              />
              <Text
                style={{
                  fontFamily: 'Roboto',
                  fontSize: 17,
                  marginLeft: 5,
                  color: '#000',
                }}>
                Set Different reminder
              </Text>
            </TouchableOpacity>
          )}
          {vaccinatedOn == 1 && toggle == 1 ? (
            <TouchableOpacity style={{flexDirection: 'row'}}>
              <Image
                source={Images.circle}
                style={{
                  height: 15,
                  width: 15,
                  marginTop: '2%',
                  // paddingRight: '1%',
                }}
              />
              <Text
                style={{
                  fontFamily: 'Roboto',
                  fontSize: 17,
                  marginLeft: 5,
                  color: '#000',
                }}>
                Vaccinated on
              </Text>
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              style={{flexDirection: 'row'}}
              onPress={() => vaccinationSet()}>
              <Image
                source={Images.circle_o}
                style={{
                  height: 15,
                  width: 15,
                  marginTop: '2%',
                  // paddingRight: '1%',
                }}
              />
              <Text
                style={{
                  fontFamily: 'Roboto',
                  fontSize: 17,
                  marginLeft: 5,
                  color: '#000',
                }}>
                Vaccinated on
              </Text>
            </TouchableOpacity>
          )}
        </View>
        <View
          style={{
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <DatePicker selected={date} onChange={(date) => setDate(date)} />
        </View>
      </View>
    </View>
    <View
      style={{
        flexDirection: 'row',
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
        width: '82%',
        paddingTop: 20,
      }}>
      <TouchableOpacity
        style={{
          flex: 1,
          borderTopColor: '#C0C0C0',
          borderTopWidth: 1,
          borderRightColor: '#C0C0C0',
          borderRightWidth: 1,
          justifyContent: 'center',
          alignItems: 'center',
          padding: 10,
        }}
        onPress={() => navigation.goBack()}>
        <Text
          style={{
            fontFamily: 'Roboto',
            fontSize: 17,
            fontWeight: 'bold',
            color: '#000',
          }}>
          Cancel
        </Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={{
          flex: 1,
          borderTopColor: '#C0C0C0',
          borderTopWidth: 1,
          borderLeftColor: '#C0C0C0',
          borderLeftWidth: 1,
          justifyContent: 'center',
          alignItems: 'center',
          padding: 10,
        }}
        onPress={() => SaveData(id)}>
        <Text
          style={{
            fontFamily: 'Roboto',
            fontSize: 17,
            fontWeight: 'bold',
            color: '#000',
          }}>
          OK
        </Text>
      </TouchableOpacity>
    </View>
  </View>
</View>

Web 视图显示如下：

但是，一旦我切换到移动视图，模式就会消失，如下所示：

请让我知道，我哪里出错了，任何线索将不胜感激，提前谢谢你。

让我知道是否需要其他任何东西。

标签： reactjsreact-nativereact-native-androidreact-native-iosreact-native-web

reactjs - 为什么移动浏览器不显示模态视图？

问题描述

解决方案

推荐阅读