标签: react-native-modal

我正在使用最新版本的react-native-modal来实现滑动功能

我想在我的模态中添加一个ScrollView.

这是我到目前为止所做的

https://snack.expo.io/ryRylJFHz

我有一个带有底部标签导航的应用程序（以防它很重要），有时用户可以打开一个模式（react-native-modal）。模态中有按钮，我想在模态内实现导航，以便当用户按下其中一个按钮时，它们会被导航到模态内的另一个屏幕（并且可以向后导航）。任何帮助表示赞赏，提前致谢！我想要的例子：

我遇到了一个问题，每次我在 React Native 应用程序中关闭模式、操作表或警报时，该应用程序都会完全冻结并且无法与之交互。

导航到新堆栈或单击按钮不会重现。

我必须杀死应用程序并重新启动才能再次交互。通过打包程序重新加载应用程序无济于事。

我们有代码，当一个人被解雇时会自动显示一个新的模态并且实际上有效 - 模态是可交互的。所以似乎只有底层内容被冻结，好像顶部仍然有一个模态但它是不可见的。

疯狂的是，这是在以前已知的好分支中复制的。因此，本地配置/缓存肯定发生了一些变化，但我不知道是什么。我重新克隆了 repo，清除了 watchman/packager/yarn 缓存，擦除了所有数据的模拟器。没有什么可以解决问题。

打包器、xcode 或 Flipper 中也没有日志指示可能出现什么问题。

使用react-native-modal,@expo/react-native-action-sheet和 内置的 React Native Alert（虽然不使用通用的 Expo 框架）。我已将这些库升级到最新版本。

没有想法了。我还能在哪里看？

更新：超最小代码重现。此模态自动显示、自动关闭，然后按钮不可按下。从代码中删除模态使按钮可按下。

function TestApp() {
  const [isVisible, setVisible] = useState(true);
  return (
    <>
      <TouchableOpacity style={{ padding: 80 }} delayPressIn={0}>
        <Text>Touch</Text>
      </TouchableOpacity>
      <Modal isVisible={isVisible} onShow={() => setVisible(false)}>
        <Text>Foo</Text>
      </Modal>
    </>
  );
}

如果我添加最小警报调用而不是模态，也会发生同样的情况。在这种情况下，我会在 5 秒后显示另一个可交互的警报。 只有弹出框是可交互的——例如警报和模式。

  useEffect(() => Alert.alert("alert"), []);
  useEffect(() => {
    setTimeout(() => Alert.alert("5s alert"), 5000);
  }, []);

更新 #2

看起来每个新的“popover”样式 …

我正在尝试构建一个具有左右轮播的反应本机屏幕，在轮播的每个面板中都有一个带有项目列表的垂直平面列表。最多有 8-10 个轮播面板，平面垂直平面列表中最多有 5-30 个项目，因此最多可能有 300 个呈现的项目，但通常为 100 个。

我正在调用 API 并每 2-3 秒检查一次服务器上的数据，并使用新数据设置组件中的状态。目前，此功能有效，并且子组件中的数据会按预期更新。

平面列表中的每个项目都是可单击的，这会触发在页面中启动模式弹出窗口。我遇到的问题是模态弹出窗口需要 4-5 秒才能出现和关闭。此外，当模态最终开始消失时，动画会变得不稳定，并且深色背景层在被删除时似乎会闪烁。

我首先尝试使用内置模态，还使用了react-native-modal 包，两者都是相同的。

我尝试使用 InteractionManager.runAfterInteractions 以及 shouldComponentUpdate(nextProps, nextState) 来尝试阻止我的 api 调用，直到动画完成或阻止我的 isModalVisible 状态属性在我更改它时导致重新渲染。

下面的代码，任何帮助将不胜感激。

import {
    Text,
    Button,
    StyleSheet,
    View,   
    FlatList,   
    Dimensions,
    Image,
    Animated,
    SafeAreaView,
    TouchableHighlight,
    InteractionManager,
} from 'react-native';
import React from 'react';
import Title from './Title';
import CarouselMeeting from './CarouselMeeting';
import Modal from 'react-native-modal';
import Carousel from 'react-native-snap-carousel';

class MeetingDisplay extends React.Component {
constructor(props) {
    super(props);        
    this.state = {
        raceList: [],
        meetingList: …

我想在用户点击按钮时显示一个模式，而不是关闭键盘。不幸的是，一旦模态出现，键盘就会消失。

最小再现案例：

import * as React from "react";
import { Button, Modal, Text, TextInput, View } from "react-native";

function TestComp() {
    const [showingModal, setshowingModal] = React.useState(false);
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center", marginTop: 22 }}>

            <Modal visible={showingModal} transparent onRequestClose={() => setshowingModal(false)}>
                <View style={{ flex: 1, marginTop: 22 }}>
                    <Button title={"hide modal"} onPress={() => setshowingModal(false)} />
                </View>
            </Modal>

            <TextInput placeholder="Focus to show keyboard" />
            <Button title={"Show modal"} onPress={() => setshowingModal(true)} />
        </View>
    );
}

仅供参考，我正在使用世博会。

如何强制键盘持久化？

React Native 论文中 Modal 上 TextInput 的一些奇怪行为。当我输入一个字符时，它被输入到文本框中，但随后光标闪回（就像被删除一样），然后又重新出现。这一切发生得非常快，并且保留了角色，但这一切看起来有点卡顿。下面的GIF来说明：

对于模式来说，代码相当简单：

import { Portal, Modal, Button, Title, Text, TextInput } from 'react-native-paper'; 

const [nameNew, setNameNew] = useState('')
const [emailNew, setEmailNew] = useState('')

const renderModalAddPerson = () => {
    return (
      <Portal>
        <Modal visible={visibleModalAddPerson} onDismiss={closeModalAddPerson} contentContainerStyle={styles.modalContainer}>
          <View>
            <Title style={{alignSelf:'center'}}>Title here</Title>
            <Text>  </Text>
            <TextInput
              mode="outlined"
              label="Name"
              style={{alignSelf:'center', width:'95%'}}
              value={nameNew}
              onChangeText={nameNew => setNameNew(nameNew)}
              ref={input1}
              returnKeyType='next'
              blurOnSubmit={false}
              onSubmitEditing={() => input2.current.focus()}
            />
            <TextInput
              mode="outlined"
              label="Email"
              style={{alignSelf:'center', width:'95%'}}
              value={emailNew}
              onChangeText={emailNew => setEmailNew(emailNew)}
              ref={input2}
              returnKeyType='done'
              blurOnSubmit={false}
              onSubmitEditing={() => addPerson()}
            /> …

我正在创建一个 react native 应用程序，我使用 react-native 模态组件来打开一个模态，我可以使用以下代码打开一个完整的模态。我在下面提到了我的代码示例。现在我想打开一个半模态。

这是我尝试过的。

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  TextInput,
  Image,
  Modal,
} from 'react-native';

export default class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
    };
  }
  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerText}>Test Half Modal</Text>
          <TouchableOpacity
            style={styles.addButton}
            onPress={() => {
              this.setModalVisible(true);
            }}>
            <Text style={styles.addButtonText}>Open</Text>
          </TouchableOpacity>
        </View>

        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            // this.closeButtonFunction()
          }}>
          <View …

我正在使用React Native Modal，我希望Modal的背景是透明的，并且我希望Modal显示代表屏幕

如何达到同样的要求，我哪里出错了？

下面是相同的代码，请看一下：

import React, { Component } from 'react'
import { Modal, View, Text, Dimensions, Platform, TouchableOpacity, Alert, StyleSheet, Button } from 'react-native'
import Icon from 'react-native-vector-icons/Entypo'

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

export class MyComponent extends Component {

    render = () => {
    const message = 'Do you want to upload the video now or wait until you are connected to wi-fi?'
    return (
      <Modal
        animationType='slide'
        transparent={true}
        style={{backgroundColor: 'black'}}
      >
        <View style={styles.content}>
          <View style={styles.closeBtn}> …

我使用react-native-modal-datetime-picker了一个时间选择器。我想将分钟 间隔更改为15 分钟而不是 1 分钟。这可能吗？谢谢！

我目前正在开发一个 React Native 项目。我需要在 Instagram 上实现类似于“向下滑动关闭模态框”的功能

我知道有一个关于这个主题的问题，但这并没有解决我的问题。我希望在按下“开始使用”按钮时呈现模态，但模态始终显示为这个红色框，而不是在我的显示屏上弹出。有人可以帮我制作它，以便模态仅在按下“入门”时呈现，以便模态

我的模态在 signUpModal.js 中定义为：

import React, {Component} from 'react';
import {StyleSheet, Text, View, Button} from 'react-native';
import Modal from 'react-native-modal';


const SignUpModal = (props) => (

    <Modal 
        isVisible={props.display}
        animationType={'slide'}
        onRequestClose={() => console.log('closed')}
    >
        <View style={{ flex: 1 }}>
        <Text>I am the modal content!</Text>
        <Button title="Hide modal" />
        </View>
    </Modal>
);
    
export default SignUpModal;

我的模态是从 HomePage.js 调用的。相关代码如下：

import React, {Component} from 'react';
import {StyleSheet, Text, View, Button, Image} from 'react-native';
import Swiper from 'react-native-swiper/src';
import { LinearGradient } from 'expo-linear-gradient';


import …

在我的react-native应用程序中..它有一个从react-native-modal导入的模态。Modal 内部有一个 TextInput 字段。当我专注于 textInput 时，默认情况下会打开键盘，但是在 TextInput 中输入文本后，当我尝试单击“保存”按钮时，无法单击“保存”按钮。首先它关闭键盘，然后我可以单击“保存”按钮。请问有人可以帮忙解决这个问题吗？在此输入图像描述