反應本機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
  }
})