Reactjs 为什么移动浏览器不显示模式视图？

我正在使用React native web，我有一个模式视图，如下所示：

（我仅引用退货零件，因为它主要是与设计相关的问题）

{name}
{提醒==6&&切换==6(
设置不同的提醒
) : (
提醒集（）}>
设置不同的提醒
)}
{n==1&&toggle==1(
接种疫苗
) : (
疫苗集（）}>
接种疫苗
)}
设置日期（日期）}/>
navigation.goBack（）}>
取消
保存数据（id）}>
好啊

web视图显示如下：

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

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

如果还需要其他功能，请告诉我。

应添加到Root，以使其在所有平台上都具有响应能力

<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>