将本机 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
  }
})