невозможно переместить кнопку вправо

Question

У меня есть следующий return () и я не могу переместить последний ВИД, который содержит кнопку title = 'done' на правую сторону

return (
      <View style={styles.container}>
        <Text style={styles.bigFont}>{`${this.state.timer + 'TIMER'}`}</Text>
        <Text style={styles.bigFont}>{`${this.state.min + ':' + this.state.sec}`}</Text>
        <View style={styles.button}>
          <Button title= {this.state.startFlag ? 'PAUSE' : 'START'} onPress={()=>this.startToggle()} />
          <Button title='RESET' onPress={()=>this.resetToggle()} />
        </View>
             <View style={styles.row}>
                <Text style={[styles.bold,{marginRight:10},{width:112},
                            {textAlign:'right'}]}>
                            Work Timer:</Text>
                <Text style={styles.bold}> min:</Text>
                <TextInput
                   value={Math.floor(this.state.workTime / 60).toString()}
                   style={styles.input}

                   onChangeText={(text)=>{this.captureInput(text)}}
                   onSubmitEditing={()=>{(this.update('work-min'))}}
                />
                <Text style={styles.bold}> sec:</Text>
                <TextInput
                   value={Math.floor(this.state.workTime % 60).toString()}
                   style={styles.input}
                   keyboardType='numeric'
                   onChangeText={(text) => {this.captureInput(text)}}
                   onSubmitEditing={()=>{(this.update('work-sec'))}}
                />
             </View>
             <View style={styles.row}>
                <Text style={[styles.bold,{marginRight:10},{width:112},
                            {textAlign:'right'}]}>
                            Break Timer:</Text>
                <Text style={styles.bold}> min:</Text>
                <TextInput
                   value={Math.floor(this.state.breakTime / 60).toString()}
                   style={styles.input}
                   keyboardType='numeric'
                   onChangeText={(text) => {this.captureInput(text)}}
                   onSubmitEditing={()=>{(this.update('break-min'))}}
                />
                <Text style={styles.bold}> sec:</Text>
                <TextInput
                   value={Math.floor(this.state.breakTime % 60).toString()}
                   style={styles.input}
                   keyboardType='numeric'
                   onChangeText={(text) => {this.captureInput(text)}}
                   onSubmitEditing={()=>{(this.update('break-sec'))}}
                />
             </View>
             <View style={{flexDirection:'row',justifyContent:'flex-end',alignItems:'flex-end'}} >
                <Text ><Button title='done' onPress={()=>this.resetToggle()} /></Text>
             </View>

      </View>

    )

export default StyleSheet.create({
    container: {
      flex:1,
      flexDirection:'column',
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom:150,
    },
    bigFont:{
      fontSize:40,
      color:'darkblue'
    },
    row:{
      flexDirection:'row',
      marginBottom:15,
    },
    button:{
      flexDirection:'row',
      marginTop:30,
      marginBottom:30,
    },
    bold: {
      fontWeight: 'bold',
      color:'green',
    },
    input: {
      borderWidth: 1,
      borderColor: 'black',
      marginRight: 10,
      paddingHorizontal:15,
      minWidth: 50,
    },
  })

Answer 1

поэтому, что интересно, нам нужно использовать alignSelf: 'flex-end' или использовать width: '100%'. flex: 1 определенно неверно, так как использует все доступное пространство и сдвигает все вверх.

Answer 2

Ниже код должен работать. Последний раздел заявления о возврате.

<View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}} >
<Text ><Button title='done' onPress={() => this.resetToggle()} /></Text>