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;

如何在本机其他组件上方显示浮动按钮？

1 个答案: