Как сделать компонент кнопки плавающим, используя flexbox и нативную базу - PullRequest
Новая
       29

Как сделать компонент кнопки плавающим, используя flexbox и нативную базу

0 голосов
/ 10 сентября 2018

Контекст:

У меня есть приложение, у которого есть рабочий процесс с 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), стрелки тоже будут двигаться .

what I want is

Я попробовал решение, которое просто работает с компонентом, который выглядит следующим образом: 

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?

...