如何在 React Native 的右下角放置浮动操作按钮答案

【问题标题】：How to place floating action button in bottom right in React Native如何在 React Native 的右下角放置浮动操作按钮
【发布时间】：2023-03-23 15:38:02
【问题描述】：

我试图在我的应用程序的右下角放置一个浮动操作按钮，但它被放置在屏幕左上角的位置。

返回视图：

<View>
   <View style={{flexDirection: 'row'}}>
      <TouchableOpacity onPress={this.onPress} activeOpacity={.5} >
          <Image
              source={require('./assets/images/hamburger.png')}
              style={{ width: 30, height: 25,  marginLeft: 15}}
          />
      </TouchableOpacity>
   </View>
   <FloatingAction style={styles.bottom}/>
</View>

样式：

const styles = StyleSheet.create({
  bottom: {
    flex: 1,
    position: 'absolute',
    bottom: 10,
    right:10
  },
});

我的当前视图显示标题和底部选项卡视图。我可以在每个选项卡屏幕中放置多个 FAB，但这会产生不良行为。感谢您的帮助。

编辑： 我有什么：

我想要什么：

【问题讨论】：

你能分享一些你得到什么和你需要什么的截图吗？
@DevAs 已更新，清楚吗？
要调试您的样式，请尝试为您拥有的视图添加背景，因此向父视图添加一个 bg 它将告诉您可用的空间等等
并尝试从 styles.bottom 中删除 flex:1。这个想法是您应该在填充整个屏幕的主要区域中添加浮动操作按钮。
足够公平@VolkanSahin45

标签： javascript android ios react-native

【解决方案1】：

您的问题是将{ flex: 1, position: 'absolute',} 添加到按钮样式中。覆盖所有手机屏幕的父组件将使用flex: 1，您的按钮组件是接收位置样式的组件。

始终创建新组件会使内容更易于阅读和理解。所以假设你有一个按钮组件（<FloatingButton/>），你会做这样的事情：

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import FloatingButton from './FloatingButton';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
          I'm just a Text
        </Text>

        <FloatingButton 
          style={styles.floatinBtn}
          onPress={() => alert(`I'm being clicked!`)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  floatinBtn: {
    
    position: 'absolute',
    bottom: 10,
    right: 10,
  }
});

你会得到这个结果：

这是按钮组件：

import React from 'react';
import { View, TouchableOpacity } from 'react-native';

export default props => (
  <TouchableOpacity onPress={props.onPress} style={props.style}>
    <View
      style={{
        backgroundColor: 'blue',
        width: 45,
        height: 45,
        borderRadius: 45,
      }}
    />
  </TouchableOpacity>
);

查看零食演示：https://snack.expo.io/@abranhe/floating-btn

【讨论】：

【解决方案2】：

// this should occupy the whole screen
<View style={{flex:1}}>
   <View style={{flexDirection: 'row'}}>
      <TouchableOpacity onPress={this.onPress} activeOpacity={.5} >
          <Image
              source={require('./assets/images/hamburger.png')}
              style={{ width: 30, height: 25,  marginLeft: 15}}
          />
      </TouchableOpacity>
   </View>
   <FloatingAction style={styles.bottom}/>
</View>
const styles = StyleSheet.create({
  bottom: {
    position: 'absolute',
    bottom: 10,
    right:10
  },
});

【讨论】：