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

Question

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

返回视图：

<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>

Styles：

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

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

编辑：我有什么：

我想要的是：

Answer 1

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

返回视图：

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

编辑：我有：

我想要的是：

Answer 2

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

返回视图：

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

编辑：我有：

我想要的是：

Answer 3

只需在您的代码中使用该 CSS ：

.floating-btn {
  position:fixed;
  bottom:10;
  right: 10;
}

而已