0

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

返回视图：

<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，但这会产生不良行为。感谢您的任何帮助。

编辑： 我有什么：

我想要的是：

4

2 回答 2

6

您的问题是一起添加{ 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

于 2019-12-01T05:07:54.427 回答
0 
// 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
  },
});
于 2019-12-01T04:58:15.623 回答