React-Native中的右下對齊（使用Flex-box）不起作用

Question

在我的應用中添加一個待辦事項列表類型的東西，但是當嘗試將“添加待辦事項”按鈕與右下角對齊時，該按鈕會移到任何地方。

我對CSS相當滿意，但是在使用React CSS /樣式時會變得很混亂。 我玩過不同的屬性，給父母一種風格，而不是孩子等。

該類如下

class AgendaScreen extends React.Component {
  addReminder = () => {
    //blank so far :)
  };

  render() {
    return (
      <View>
        <Text style={styles.titleStyle}>Agenda</Text>

        <View style={styles.reminderView}>
          <TouchableOpacity style={styles.reminderTouch}>
            <Text style={styles.reminderBtn}>+</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

還有這里的樣式

  //Agenda screen styles

  reminderView: {
    flex: 1,
    justifyContent: 'flex-end',
  },

  reminderTouch: {
    width: 60,
    height: 60,
    backgroundColor: 'orange',
    borderRadius: 100,
    textAlign: 'center',
    margin: 20,
  },

  reminderBtn: {
    fontSize: 50,
    margin: 10,

    alignSelf: 'flex-end',
  },

目標是將加號符號對准圓的中間，並將該圓對准右下角。 使用粘貼的設置，圓圈在左上角，加號與圓圈的底部對齊。

另外，上面發布的代碼並不是我得到的最接近的代碼，因為我可以輕松地通過padding來做到這一點，但我更喜歡使用flexbox。

Answer 1

只需將樣式更改為該樣式即可，請在頂視圖中添加樣式

<View style={{flex:1}}>
        <Text>Agends</Text>
        <View style={styles.reminderView}>
          <TouchableOpacity style={styles.reminderTouch}>
            <Text style={styles.reminderBtn}>+</Text>
          </TouchableOpacity>
        </View>
      </View>




reminderView: {
    flex: 1,
    right:0,
    margin:5,
    bottom:0,
    position:'absolute'
  },

  reminderTouch: {
    width: 60,
    height: 60,
    backgroundColor: 'orange',
    borderRadius: 100,
    justifyContent:'center',
    alignItems:'center',
    margin: 20,
  },

  reminderBtn: {
    fontSize: 50,
    margin: 5,
    alignSelf: 'center',
  }

請檢查這個快餐。博覽會鏈接

Answer 2

這是我的方法：

<View style={{
    flex: 1,
justifyContent: 'center',
width:'100%',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
  }}>
    <View
    style={{
      justifyContent:'center',
      alignItems:"center",
      width:65,
      borderRadius:100,
      height:65,
      position:'absolute',
      bottom:15,
      right:15,
      backgroundColor:"red",
      elevation:10
    }}
    >
    <Icon
    name="plus"
    size={25}
    color="white"
    />
    </View>
  </View>

它所做的是，它使對圓形按鈕浮動bottom right corner的畫面。 由於您要制作待辦事項應用程序，因此當它變長時，您希望它浮動在待辦事項列表上。 https://snack.expo.io/@ammarahmed/rebellious-donuts