将虚拟形象和图标放在页面顶部,而不React Native元素标题

bihw5rsg  于 2022-11-17  发布在  React
关注(0)|答案(1)|浏览(109)

我正试着做这样的事情。
我正在使用React原生元素,当我添加组件时,它会带来一个非常蓝色的标题,因此会干扰其他屏幕,我不希望所有屏幕上都出现蓝色标题。
现在我正在寻找一种方法,有头像在左上角和“+”号在右上角没有蓝色标题的东西显示。
这是当我从React原生元素中移除标题时的样子

这是目前为止的源代码

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Header, Avatar, Icon} from '@rneui/themed';

const HomePage = () => {
  return (
    <View>
      <Avatar
        small
        rounded
        source={{
          uri: 'http://www.usanetwork.com/sites/usanetwork/files/styles/629x720/public/2016/07/mrrobot_s2_cast_rami-malek2.jpg',
        }}
        onPress={() => console.log('Left Clicked!')}
        activeOpacity={0.7}
      />

      <Icon
        name={'add-circle-outline'}
        color={'#00BB23'}
        size={32}
        onPress={() => console.log('Right Clicked!')}
      />
    </View>
  );
};

export default HomePage;

const styles = StyleSheet.create({});

有什么我做得不对吗?请指教,我需要知道。

55ooxyrt

55ooxyrt1#

又一次,我让它工作了。
我使用了头文件并将参数设置为“Transparent”,它工作正常,然后我使用npm安装了这个包react-native-safe-area-view
像这样npm i react-native-safe-area-view
然后在我的代码中使用它,它工作得很好。
代码举例

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import {useSafeArea} from 'react-native-safe-area-view';

const ProfilePage = () => {
  const safeArea = useSafeArea();
  return (
    <View style={{flex: 1, paddingTop: safeArea.top}}>
      <Text>ProfilePage</Text>
    </View>
  )
}

export default ProfilePage

const styles = StyleSheet.create({})

然后,对于React原生元素的透明标题
我用这个

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Header, Avatar, Icon} from '@rneui/themed';

const HomePage = () => {
  return (
    <View>
      <Header
        containerStyle={{
          backgroundColor: 'transparent',
          justifyContent: 'space-around',
        }}
        leftComponent={
          <Avatar
            small
            rounded
            source={{
              uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiRne6FGeaSVKarmINpum5kCuJ-pwRiA9ZT6D4_TTnUVACpNbzwJKBMNdiicFDChdFuYA&usqp=CAU',
            }}
            onPress={() => console.log('Left Clicked!')}
            activeOpacity={0.7}
          />
        }
        rightComponent={
          <Icon
            name={'add-circle-outline'}
            color={'#00BB23'}
            size={32}
            onPress={() => console.log('Right Clicked!')}
          />
        }></Header>
    </View>
  );
};

export default HomePage;

const styles = StyleSheet.create({});

我必须使用Npm包导入rneui/themed
一切正常,正如预期的那样
谢谢大家!

相关问题