我这里有一个应用程序,我需要在导航栏中放置徽标.需要溢出场景布局.在Ios上工作很好,没有问题,但在安卓上他似乎不工作.我把代码放在图片的底部.正如你们所看到的,我使用EStyleSheet,所以让我使用%.

国际标准化组织

enter image description here

安卓

enter image description here

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import EStyleSheet from 'react-native-extended-stylesheet';
import { View, Platform } from 'react-native';
import { SmallLogo } from './components';
import { checkColor } from './helpers';
import {
  HomeScreen,
  ImagePickerScreen,
  WaitingResponseScreen,
  ResultsScreen
} from './modules';
import Colors from '../constants/Colors';

const styles = EStyleSheet.create({
  navStyle: {
    flex: 1,
    marginTop: '5%',
    alignItems: 'center',
  },
  logoCircle: {
    backgroundColor: '$whiteColor',
    height: 60,
    width: 60,
    borderRadius: 30,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

const logoNav = result => (
  <View style={styles.navStyle}>
    <View style={styles.logoCircle}>
      <SmallLogo color={checkColor(result)} />
    </View>
  </View>
);

const pdTop = Platform.OS === 'ios' ? 64 : 54;

export default () => (
  <Router
    sceneStyle={{ paddingTop: pdTop }}
    navigationBarStyle={{ backgroundColor: Colors.greenColor }}
    renderTitle={props => {
      if (props.result) {
        return logoNav(props.result);
      }
      return logoNav(null);
    }}
    backButtonTextStyle={{ color: Colors.whiteColor }}
    leftButtonIconStyle={{ tintColor: Colors.whiteColor }}
  >
    <Scene
      key="home"
      component={HomeScreen}
    />
    <Scene
      key="imagesPicker"
      hideBackImage
      component={ImagePickerScreen}
    />
    <Scene
      key="waitingResponse"
      backTitle="Back"
      component={WaitingResponseScreen}
    />
    <Scene
      key="results"
      backTitle="Back"
      initial
      component={ResultsScreen}
    />
  </Router>
);

推荐答案

在安卓系统中,你不能在组件的边界之外绘制,这是一件非常烦人的事情.我通常会做以下的变通方法:将组件包装在一个新的<View>中,该<View>同时包装以前的容器和溢出的数据.将视图backgroundColor设置为'transparent',使其不可见,将pointerEvents属性设置为'box-none',以便将事件传播到子对象.视图的尺寸应该是前顶部组件的尺寸加上溢出(在您的情况下,它只是高度),但我认为在某些情况下,这也应该与Flexbox配合得很好.

React-native相关问答推荐

FlatList有时不会在数据更改时重新呈现

在第二次加载时仅将本机应用程序设置为状态

如何在 react-navigation v6 中更改标题高度

是否有用于react-native 的简单同步存储选项?

react native HTML entities

React Native - Expo:fontFamily 'SimpleLineIcons' 不是系统字体,尚未通过 Font.loadAsync 加载

react-native (expo)加载markdown 文件

使用 React-Native 将 content:// URI 转换为 Android 的实际路径

React中类似于 React Native 中的 FlatList

如何使用 AsyncStorage React Native 缓存 API 数据

打包程序无法启动

为 React Native TextInput 创建 ref 时出现 TypeScript 问题

带有 react-navigation 的 DrawerNavigation 标头

从组件的 style属性中获取 CSS 属性值

从数据源添加/删除列表视图项时为它们设置动画

如何使用 Expo 在真实的 iOS 设备上运行应用程序?

是否需要使用 StyleSheet.create?

React Native:如何将 的高度和宽度设置为 容器?

如何在 React Native 中创建拖放操作?

StackNavigator中如何改变动画的方向?