将本机2种颜色作为背景

Question

我试着用flex制作2种颜色的背景，它看起来很好，但是我想让中间的按钮和照片中的按钮一样，在代码中插入按钮？我想要这样：

​

​

     return (
            <View style={container}>
                <View style={leftContainer}>
                </View>
                <View style={rightContainer}>
                </View>
                <Button 
                    title="button"/>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection:'row'

    },
    leftContainer:{
        flex:1,
        backgroundColor: '#ca8afa',    
    },
    rightContainer:{
        flex:1,
        backgroundColor: '#96d0e3'

    },
    addButton: {
      justifyContent: 'center',
      alignItems: 'center',
      position: 'absolute',
      bottom: 20,
      right: 20,
      zIndex: 1111,
      width: calcSize(192 / 2),
      height: calcSize(192 / 2)
    }
  }) 

问题是，按钮现在也在行中，而不是在中间，我如何修复它？

Answer 1

下面是一个可能的解决方案的现场演示：https://snack.expo.io/HJFL7A3ez

编辑-也在这里添加了代码：

export default class App extends Component {
  render() {
        return (
            <View style={styles.container}>
                <View style={styles.leftContainer}>
                </View>
                <View style={styles.rightContainer}>
                </View>
                <View style={styles.buttonContainer}>
                  <Button style={styles.addButton} title="button"/>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      flexDirection:'row'

  },
  leftContainer:{
      flex:1,
      backgroundColor: '#ca8afa',    
  },
  rightContainer:{
      flex:1,
      backgroundColor: '#96d0e3'

  },
  buttonContainer: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  addButton: {
    zIndex: 1111,
    width: 200
  }
})