Размещение компонентов управления с помощью flexbox

DCR спросил: 28 марта 2018 в 03:58 в: css

У меня есть следующий APP. У меня возникают проблемы с интервалом компонентов в возврате класса App.

Я бы немного переместил "Сброс" и немного начал "Начать". Было бы неплохо, если бы был простой способ управления вертикальным размещением

import React from 'react';
import { Button,StyleSheet, Text, View } from 'react-native';
export class Timers extends React.Component{
  constructor(props){
    super(props)
    this.state={work:{min:this.props.min,
                      sec:this.props.sec,
                      buttton:this.props.button,
                      period:this.props.period,},
                play:{min:this.props.min,
                      sec:this.props.sec,
                      buttton:this.props.button,
                      start:this.props.start,
                      period:this.props.period,}
               }
  }

  render(){
    return(
      <View style={styles.timer}>
         <Text>{this.props.name}</Text>
         <Text>{'min: ' + this.props.min + ' sec: ' + this.props.sec }</Text>


         <Text>{this.props.period}</Text>

      </View>
    )
  }
}
export default class App extends React.Component {
  constructor(){
    super()
    this.state={start:'Start'}
  }
  parentState(){
       if(this.state.start === 'Start') startStop = 'Stop'
       else  startStop = 'Start'
    this.setState({start:startStop})
  }
  buttonPress(x){
    if(x === 'Start' || x === 'Stop')this.parentState()
    console.log(x)
  }
  render() {
    return (
      <View style={styles.container}>
         <Button style={styles.top} title='Reset'onPress=
           {()=>this.buttonPress(this.state.start)}/>
              <View style={styles.row}>
                 <Timers
                    name={'WORK'}
                    min={'25'}
                    sec={'00'}
                    button={'Reset'}
                    period={'tbd'} >
                 </Timers>
                 <Timers
                    name={'PLAY'}
                    min={'25'}
                    sec={'00'}
                    period={'tbd'} >
                 </Timers>
              </View>

         <Button title={this.state.start} onPress=
           {()=>this.buttonPress(this.state.start)}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'column',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  timer:{
    flex:1,
    flexDirection:'column',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',

  },
  row:{
    flex:0,
    flexDirection:'row',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',

  },
});

1 ответ

DCR ответил: 28 марта 2018 в 04:16

примените marginTop и MarginBottom к styles.row, добьется цели