javascript - react 导航导航标题顶部的绝对位置

coder 2025-03-22 原文

我正在制作加载屏幕并将其设置为绝对定位整个屏幕。但是，当使用 react-navigation 时，它似乎没有覆盖标题。有没有办法将我的组件放在导航库的 header 组件之上？

当您使用 react-navigation 时，您可以为该屏幕配置标题。通常，当您导航到一个屏幕时，您在该屏幕中呈现的任何代码都会自动放置在导航标题下方。但是，我希望我的组件占据整个屏幕并覆盖标题。我想保留标题，但我想用不透明度覆盖它。这可能吗？

const navigationOptions = {
  title: "Some Title",
};

    const Navigator = StackNavigator(
  {
    First: { screen: ScreenOne },
    Second: { screen: ScreenTwo },
    ...otherScreens,
  },
  {
    transitionConfig,
    navigationOptions, //this sets my header that I want to cover
  }
);

这是我的 loader.js

const backgroundStyle = {
  opacity: 0.5,
  flex: 1,
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  zIndex: 1,
};

const Loading = () =>
  <View style={backgroundStyle}> 
      <PlatformSpinner size="large" />
  </View>;

在 ScreenOne.js 中

class ScreenOne extends Component { 
  render(){
   if(loading) return <Loading/>;
   return (
     //other code when not loading that is placed under my header automatically
   )
  }
}

最佳答案

根据你的问题，我的理解是，你想在所有其他组件之上呈现一个微调器组件，包括不透明的导航标题。

一种方法是渲染一个 Modal 组件，它包裹着您的 spinner。模态组件占据全屏，你可以给 Prop transparent = true。并自定义 Modal 的父 View ，使其具有 具有不透明度的背景色，如图所示。现在在任何地方显示/隐藏这个 Modal 组件来处理加载。

使用小吃的演示:https://snack.expo.io/SyZxWnZPZ

下面的示例代码

import React, { Component } from 'react';
import { View, StyleSheet,Modal,ActivityIndicator,Button } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  state = {
    isShowModal: false,
  }
  render() {
    return (
      <View style={styles.container}>
        <Button title='show modal' onPress={() => this.setState({isShowModal: true})} />
        {this.state.isShowModal && this.showModal()}
      </View>
    );
  }

  showModal() {
    setTimeout(() => this.setState({isShowModal: false}), 5000); // just to mimic loading
    return(
      <Modal
        animationType='fade'
        transparent={true}
        visible={true}>

        <View style={{flex:1,backgroundColor:'rgba(0,0,0,.2)'}}>
          <ActivityIndicator size='large' color='red' style={{flex:1}} />
        </View>
      </Modal>
    )
  }
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

关于javascript - react 导航导航标题顶部的绝对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45468171/

javascript 绝对 code 39 section reactjs react-native absolute react-navigation

有关javascript - react 导航导航标题顶部的绝对位置的更多相关文章

ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2
我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植
ruby - 正则表达式在哪个位置失败？ - 2
我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式，但在这种情况下，我必须找到与表达式相对应的字符串停止的位置，但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有？)例如，如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置，你可以确定匹配结束
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby - 如何跳过 CSV 文件的第一行并将第二行作为标题 - 2
有没有办法跳过CSV文件的第一行，让第二行作为标题？我有一个CSV文件，第一行是日期，第二行是标题，所以我需要能够在遍历它时跳过第一行。我尝试使用slice但它会将CSV转换为数组，我真的很想将其读取为CSV，以便我可以利用header。最佳答案根据您的数据，您可以使用另一种方法和skip_lines-option此示例跳过所有以#开头的行require'csv'CSV.parse(DATA.read,:col_sep=>';',:headers=>true,:skip_lines=>/^#/#Markcomments!)do|
ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2
我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1
ruby - Heroku production.log 文件位置 - 2
我想在heroku.com上查看我的应用程序日志的内容，所以我关注了thisexcellentadvice并拥有我所有的日志内容。但是我现在很想知道我的日志文件实际在哪里，因为“log/production.log”似乎是空的:C:\>herokuconsoleRubyconsoleforajpbrevx.heroku.com>>files=Dir.glob("*")=>["public","tmp","spec","Rakefile","doc","config.ru","app","config","lib","README","Gemfile.lock","vendor","sc
ruby - 在 Ruby 中查找多个正则表达式匹配的模式和位置 - 2
这应该是一个简单的问题，但我找不到任何相关信息。给定一个Ruby中的正则表达式，对于每个匹配项，我需要检索匹配的模式$1、$2，但我还需要匹配位置。我知道=~运算符为我提供了第一个匹配项的位置，而string.scan(/regex/)为我提供了所有匹配模式。如果可能，我需要在同一步骤中获得两个结果。最佳答案 MatchDatastring.scan(regex)do$1#Patternatfirstposition$2#Patternatsecondposition$~.offset(1)#Startingandendingpo
ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2
我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？最佳答案尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几
ruby-on-rails - 尝试打开 .gitignore 以在文本编辑器中对其进行编辑，但在 OS X Mountain Lion 上找不到文件位置 - 2
我使用“newapp_name”创建了一个新的Rails应用程序，我正在尝试编辑.gitignore文件，但在我的应用程序文件夹中找不到它。我在哪里可以找到它？我安装了Git。最佳答案 .gitignore位于项目的root中，而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑，但在OSXMountainLion上找不到文件位
ruby-on-rails - 在 Rails 中存储(结构化)配置数据的位置 - 2
对于我正在编写的Rails3应用程序，我正在考虑从本地文件系统上的XML、YAML或JSON文件中读取一些配置数据。重点是:我应该把这些文件放在哪里？Rails应用程序中是否有用于存储此类内容的默认位置？附带说明一下，我的应用程序部署在Heroku上。最佳答案我经常做的是:如果文件是通用配置文件:我在目录/config中创建一个YAML文件，每个环境有一个上层key如果我为每个环境(大项目)创建一个文件:我为每个环境创建一个YAML并将它们存储在/config/environments/然后我在加载YAML的地方创建了一个初始化

javascript - react 导航导航标题顶部的绝对位置

有关javascript - react 导航导航标题顶部的绝对位置的更多相关文章

随机推荐