Question

如何在react native上创建这种按钮？我知道我可以使用圆角半径创建带有圆角的按钮，但是重叠部分呢？

Answer 1

您应该使用绝对定位。看看我为您准备的快照：

https://snack.expo.io/r1tw8M6iQ

请注意，RNT中的绝对位置与CSS中的绝对位置不同。在这里查看文档：{{3}}

Answer 2

解决@Lukasz的另一种方法是使用相对定位。由于很难为所有不同的屏幕尺寸设置绝对定位，因此我更喜欢使用左/右值为负的相对定位。这样，我就可以像其他应用程序一样使用flex设置容器了。

样品（从@Lukasz的小吃中修改而来） https://snack.expo.io/@bennygenel/cm91bm

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={[styles.round, styles.red]}>
          <Text>BTN1</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.round, styles.green]}>
          <Text>BTN1</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  red: {
    backgroundColor: 'red',
    zIndex: 2
  },

  green: {
    backgroundColor: 'green',
    position: 'relative',
    borderTopLeftRadius: 0,
    borderBottomLeftRadius: 0,
    left: -22
  },

  round: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 100,
    height: 50,
    borderRadius: 50
  }
});

Answer 3

根据其他答案，您还可以在此处获得选择登录： https://snack.expo.io/@xavier96/rounded-ovelaying-buttons

export default class App extends React.Component {

  state = {
    btn1Selected: true,
    btn2Selected: false,
  }

  render() {
    const { btn1Selected, btn2Selected } = this.state;
    return (
      <View style={styles.container}>
          <TouchableOpacity
            style={[styles.round, styles.first, styles.inferiorIndex, btn1Selected && styles.superiorIndex, btn2Selected && styles.borderRightRadius]}
            onPress={() => this.setState({btn1Selected: true, btn2Selected: false})}
           >
             <Text>BTN1</Text>
           </TouchableOpacity>
           <TouchableOpacity 
             style={[styles.round, styles.second, styles.inferiorIndex, btn2Selected && styles.superiorIndex]}
             onPress={() => this.setState({btn1Selected: false, btn2Selected: true})}
           >
             <Text>BTN2</Text>
           </TouchableOpacity>
      </View>
   );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  first: {
    backgroundColor: 'grey',
    zIndex: 1
  },

  second: {
    backgroundColor: 'grey',
    position: 'relative',
    borderTopLeftRadius: 0,
    borderBottomLeftRadius: 0,
    left: -22,
    zIndex: 0
  },

  round: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 100,
    height: 50,
    borderRadius: 50
  },

  superiorIndex: {
    zIndex: 2,
    borderTopLeftRadius: 50,
    borderBottomLeftRadius: 50,
    backgroundColor: 'red'
  },

  inferiorIndex: {
    zIndex: 1,
  },

  borderRightRadius: {
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
  }
});

如何在本机上两个重叠的圆形按钮？

3 个答案: