无法向右移动按钮

Question

我有以下 return() 并且无法将包含按钮 title = 'done' 的最后一个 VIEW 移动到右侧

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

下面的代码应该可以工作。 return 语句的最后一部分。

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