使用flexbox控制组件放置

Question

我有以下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',

  },
});

Answer 1

将marginTop和MarginBottom应用于styles.row可以实现技巧