javascript - 如何在 React Native 中将 float 操作按钮放置在右下角

Question

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

返回 View :

<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
  },
});

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

编辑: 我有什么:

我想要的:

Answer 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