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

debugcn 发表于 Dev

最大限度

制作待办事项列表类型的内容以添加到我的应用程序中，但是当尝试将“添加待办事项”按钮与右下角对齐时，该按钮会出现在除此之外的任何地方。

我很擅长 CSS，但在使用 React CSS/styles 时却很糟糕。我玩过不同的属性，给父母一个风格而不是孩子等等。

类如下

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

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

此外，上面发布的代码并不是我得到的最接近的代码，因为我可以使用填充轻松完成，但我更喜欢使用 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',
  }

请查看此snack.expo 链接

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。