时间戳

首页 > 解决方案 > 我的 React Native 模式不起作用，我找不到原因

react-native - 我的 React Native 模式不起作用，我找不到原因

问题描述

我对本机反应不是很好，而且我在弹出模式时遇到了麻烦。这意味着就像一个警告，然后您单击“我了解”按钮继续。谢谢，在未来：D

当我遇到问题时，我一直在关注如何制作 React Native 应用程序的教程，但这部分我无法找到答案。我对本机反应相对较新，这是我第一次尝试创建应用程序。获得帮助会很棒:)

这是我到目前为止所拥有的（app.js 是我唯一的文件）：

import React, { useState } from 'react';
import { Button, Modal, SafeAreaView, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';

export default function App() {

  const [modalVisible, setModalVisible] = useState(false);
  
  return (
    <>
      <SafeAreaView style={styles.container}>
          <TouchableOpacity style={styles.topButton}>
            <Text style={styles.text}>
              Favorites
            </Text>
          </TouchableOpacity>

          <TouchableOpacity onPress={() => setModalVisible(true)} style={styles.button}>
            <Text style={styles.text}>
              Memes
            </Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.button}>
            <Text style={styles.text}>
              Jokes
            </Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.button}>
            <Text style={styles.text}>
              Yo Mama Jokes
            </Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.button}>
            <Text style={styles.text}>
              Cute Pictures
            </Text>
          </TouchableOpacity>

          <Modal 
            visible={modalVisible} 
            animationType="fade">
            style={styles.modal}
            <Button title="I understand" visible={modalVisible} onPress={() => setModalVisible(false)}/>
            
          </Modal>

          <StatusBar style="auto" />

      </SafeAreaView>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 10,
    backgroundColor: '#0f0117',

  },
  topButton: {
    backgroundColor: "dodgerblue",
    borderRadius: 15,
    alignContent: 'center',
    alignItems: 'center',

    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 10,
    paddingRight: 10,
    marginTop: 10,
    marginBottom: 50,
    marginLeft: 10,
    marginRight: 10,
  },
  button: {
    backgroundColor: "dodgerblue",
    borderRadius: 15,
    alignContent: 'center',
    alignItems: 'center',

    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 10,
    paddingRight: 10,
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10,
  },
  text: {
    color: '#ffffff',
    fontSize: 30,
  },
 modal: {
  backgroundColor: "#0f0117",
  marginTop: 15,
  marginBottom: 15,
  marginLeft: 15,
  marginRight: 15,
  },
});**

标签： react-native

解决方案

这可能与您的样式有关。对于styles.modal，试试

modal: {
  backgroundColor: "#0f0117",
  marginTop: 15,
  marginBottom: 15,
  marginLeft: 15,
  marginRight: 15,
  position: "absolute"
  top: "20%" # You can try different values here along with bottom, left, and right properties
},

推荐阅读