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
  }
})

反应原生2种颜色作为背景

1 个答案: