Javascript React Native中的右下对齐（使用Flex box）不工作

制作一个待办事项列表类型的东西添加到我的应用程序中，但当尝试将“添加待办事项”按钮对齐到右下角时，该按钮不在那里

我对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>
    );
  }
}

目标是在圆的中间对齐加号，并将圆圈与右下角对齐。通过粘贴设置，圆位于左上角，加号与圆的底部对齐

---

此外，上面发布的代码不是我得到的最接近的代码，因为我可以轻松地使用填充，但我更喜欢使用flexbox。

只需更改您的样式，替换为此样式，并请将样式添加到您的俯视图

<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',
  }

代理
+
提醒视图：{
弹性：1，
右:0,，
差额：5，
底部：0，
位置：'绝对'
},
提醒触摸：{
宽度：60，
身高：60，
背景颜色：“橙色”，
边界半径：100，
辩护内容：'中心'，
对齐项目：'中心'，
差额：20，
},
提醒者：{
尺寸：50，
差额：5，
对齐自我：“中心”，
}

---

请查看这个snack.expo链接

以下是我的做法：

<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>

它的作用是使圆形按钮浮动在屏幕的右下角。因为你正在制作一个待办事项应用程序，所以当它变长时，你会希望它漂浮在待办事项列表上。

---

我更新我的答案，请检查您是否需要将样式添加到顶部并将底部：0添加到提醒查看样式Sweet，它可以正常工作。唯一的问题是如果你看得足够近，加号没有垂直居中（低下）是的，我知道如果我们去掉边距，它会在中心：）

<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>