react-native 如何在其他组件上方显示浮动按钮？

Question

我正在尝试让一个浮动操作按钮显示在我的应用右下角的其他组件上。在这种情况下，现在它需要显示在列表上并随着列表的移动保持静态。目前按钮确实

我尝试将按钮样式放在视图标签和按钮中，但在我的屏幕上都没有显示任何内容

这是我的按钮组件：

import React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';

const FloatingPlusButton = () => {
    return (
      <View style={styles.buttonStyle}>
        <Button>
          <FontAwesome
            name='plus'
            size={32}
          />
        </Button>
      </View>
    );
};

const styles = StyleSheet.create({
  buttonStyle: {
    position: 'absolute',
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    right: 30,
    bottom: 30,
    backgroundColor: '#82ff9e',
  }
});

export default FloatingPlusButton;

这是我要显示按钮的屏幕：

import React, { Component } from 'react';
import { View, Dimensions } from 'react-native';
import Header from '../components/common/Header';
import TodayIncludes from '../components/TodayIncludes';
import MainTodo from '../components/todoComponents/mainTodo';
import { registerForPushNotificationsAsync } from '../functions/pushNotificationsRegister';
import { FloatingPlusButton } from '../components/FloatingPlusButton';

const HEIGHT = Dimensions.get('window').height;

class HomeScreen extends Component {
  componentDidMount() {
    registerForPushNotificationsAsync();
  }
  render() {
    return (
      <View style={{ flex: 1, height: HEIGHT }}>
        <Header navigation={this.props.navigation} />
        <TodayIncludes />
        <MainTodo />
        {FloatingPlusButton}
      </View>
    );
  }
}

export default HomeScreen;

我不确定我是否在导入时调用了错误的组件？我认为它应该没有括号并像普通组件一样调用它，但这给了我一个不变的违规。

Answer 1

您在代码中使用了错误的组件，jxs { } 大括号用于执行传统的 js 代码，就像您可能想要循环数组等一样。

import React, { Component } from 'react';
import { View, Dimensions } from 'react-native';
import Header from '../components/common/Header';
import TodayIncludes from '../components/TodayIncludes';
import MainTodo from '../components/todoComponents/mainTodo';
import { registerForPushNotificationsAsync } from '../functions/pushNotificationsRegister';

// Since you are exporting the component as default there is no need to
// do it by using selective import
import FloatingPlusButton from '../components/FloatingPlusButton';

const HEIGHT = Dimensions.get('window').height;

class HomeScreen extends Component {
  componentDidMount() {
    registerForPushNotificationsAsync();
  }
  render() {
    return (
      <View style={{ flex: 1, position: "relative", height: HEIGHT }}>
        <Header navigation={this.props.navigation} />
        <TodayIncludes />
        <MainTodo />
        {/* Here is how you execute js code */}
        <FloatingPlusButton />
      </View>
    );
  }
}

export default HomeScreen;