react-native – 将反射添加到react-navigation导航器

发布时间：2020-12-15 16:21:04 所属栏目：百科来源：网络整理

导读：我正在尝试添加叠加层(例如,显示错误弹出窗口/烤面包机/调试按钮等)到 react-navigation导航器. 但是我有一个问题：当我将react导航器放在视图中时,覆盖在顶部,反应导航器不会出现或以某种方式失真. import React,{ Component } from 'react';import { Text

我正在尝试添加叠加层(例如,显示错误弹出窗口/烤面包机/调试按钮等)到 react-navigation导航器.

但是我有一个问题：

当我将react导航器放在视图中时,覆盖在顶部,反应导航器不会出现或以某种方式失真.

import React,{ Component } from 'react';
import { Text,View } from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
   title: 'Welcome',};
  render() {
    return <Text>Hello,Navigation!</Text>;
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },});

class SimpleAppWithOverlay extends React.Component {
  render() { 
    return( 
      <View>
        <View style={{position: "absolute",backgroundColor:"transparent",margin:30}}>
           <Text>Some Overlay</Text>
        </View>
        <SimpleApp/> 
      </View>);
  }
}

以下是两个片段,展示了我在实时编辑器中的含义：

>基本反应导航设置：https://snack.expo.io/ryI4oCvQW
>相同,但重叠尝试：https://snack.expo.io/HkSgoCDX-

您可以在第二个示例中看到,叠加层显示但底层应用程序不可见.

这可以吗？怎么样？

解决方法

改变了你的代码

import React,{ Component } from 'react';
import { AppRegistry,Text,View } from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',};
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Text>Hello,Navigation!</Text>
      </View>
    )
  }
}

class SimpleAppWithOverlay extends React.Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <SimpleApp />
        <View style={{ position: "absolute",backgroundColor: 'rgba(255,0.4)',top: 0,bottom: 0,left: 0,right: 0 }}>
          <Text style={{ paddingTop: 8 }}>Some Overlay</Text>
        </View>
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },});

AppRegistry.registerComponent('overlayapp',() => SimpleAppWithOverlay);

你应该注意到这个位置：’绝对’只是相对于父母的定位而不是像css那样绝对绝对.

如果要覆盖navigationBar上方,可以使用navigationOptions.headerRight执行类似操作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!