如何使用flexbox和本机基础使按钮的组件浮动

Question

上下文：

我有一个具有n个步骤的工作流程的应用程序。因此，我在StackAction导航器中放置了两个箭头，用于在步骤之间切换屏幕。

代码

我有一个用此代码表示的屏幕（为简洁起见，删除了Row &&条件模板中的内部内容）：

import React from "react";
import { StyleSheet, Dimensions } from "react-native";
import { Col, Container, Content, Row, Button, Subtitle } from "native-base";

class WorkflowScreen extends React.Component {
  render() {
    let jsx = (
      <Row>
        <Col style={styles.left}>
          <Button />
        </Col>
        <Col style={[styles.middle]}>
          <Row>
            <Subtitle subTitle={"toto"} />
          </Row>
          <Row />
          <Row style={styles.videoContainer} />
          <Row />
          <Row style={styles.videoContainer} />
        </Col>
        <Col style={styles.right}>
          <Button />
        </Col>
      </Row>
    );
    return (
      <Container>
        <Subtitle subTitle={"toto"} />
        <Content contentContainerStyle={styles.mainContainer}>{jsx}</Content>
      </Container>
    );
  }
}

export default WorkflowScreen;

const styles = StyleSheet.create({
  mainContainer: {
    backgroundColor: "#fff",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center"
  },
  contentContainer: {
    flex: 1
  },
  left: {
    width: 150,
    marginLeft: 10,
    alignItems: "center",
    justifyContent: "center"
  },
  right: {
    width: 150,
    alignItems: "center",
    justifyContent: "center"
  },
  middle: {
    alignItems: "flex-start",
    justifyContent: "flex-start",
    flex: 1
  },
  videoContainer: {
    width: Dimensions.get("window").width * 0.5,
    height: Dimensions.get("window").height * 0.5
  }
});

它工作正常，意味着我的组件在正确的位置，我只是无法使屏幕两侧的按钮浮动，这意味着如果我滚动主要内容（在Col.middle组件内部），箭头也会移动

我尝试了一种仅适用于如下所示组件的解决方案：

import React, { Component } from "react";
import {
  StyleSheet,
  TouchableOpacity,
  Dimensions
} from "react-native";
import {Icon, View} from "native-base";

export default class NavButton extends Component {
  render() {
    const { direction } = this.props;
    return (
      <View style={[
        this.props.direction !== "left" ? styles.right : styles.left,
        this.state.orientation
          ? styles.navButtonPortrait
          : styles.navButtonLandscape
      ]}>
        <TouchableOpacity onPress={() => this.handleCallback()}>
          <Icon
            name={ (this.props.direction !== "left") ? "arrow-right" : "arrow-left"}
            type={"SimpleLineIcons"}
            style={styles.buttonCircle}
          />
        </TouchableOpacity>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  buttonCircle: {
    color: "#6e6e6e",
    borderColor: '#666',
    borderWidth: 0.5,
    padding: 10,
    borderRadius: 50,
  },
  left: {
    flex:1,
    alignItems: "flex-start",
    justifyContent: "space-around",
    left: 5,
  },
  right: {
    flex:1,
    alignItems: "flex-end",
    justifyContent: "space-around",
    right: 5,
  },
  navButtonPortrait: {
    bottom:
    Dimensions.get("window").height *
    ((50 - sizeButtonNextPortrait / 2) / 100),
    position: "absolute",
    height: sizeButtonNextPortrait + "%",
    aspectRatio: 1,
  },
  navButtonLandscape: {
    bottom:
    Dimensions.get("window").height *
    ((50 - sizeButtonNextLandscape / 2) / 100),
    height: sizeButtonNextLandscape + "%",
    position: "absolute",
    aspectRatio: 1
  }
});

但是我正在寻找一种更简洁的方法，就横向或纵向解决方案而言=>基本上使用flexbox是完成所有事情的最佳方法。

问题是：如何使用flex实现此目标？