在ReactNative中水平居中元素-有解無憂

我想水平居中一個按鈕，這是我的代碼：

  return (
    <View style={styles.root}>
      <View style={styles.container}>
        <SafeAreaView style={HEADER}>
          <SliderBox
            style={{ height: '100%' }}
            currentImageEmitter={index => setCurrentSliderNumber(index)}
            images={data.images}>
          </SliderBox>
        </SafeAreaView>
        {currentSliderNumber == data.images.length - 1 ? <View style={styles.item}>
          <Button
            style={styles.getStartedButton}
            appearance="ghost"
            status="control"
            onPress={onGetStartedPressed}
          >
            Get Started
          </Button>
        </View> : null}
      </View>
    </View>
  )

這是我的造型：

const styles = StyleSheet.create({
  forgotPasswordButton: {
    paddingHorizontal: 0,
  },
  root: {
    flex: 1,
    height: '100%',
    backgroundColor: '#fff'
  },
  container: {
    borderColor: 'rgba(0,0,0,0.2)',
  },
  getStartedButton: {
    marginVertical: 12,
    backgroundColor: 'red'
  },
  item: {
    borderColor: 'rgba(0,0,0,0.2)',
    position: 'absolute',
    top: '80%',
    left: '50%'
  }, text: {
    position: 'absolute',
    top: '30%',
    left: '10%'
  }
})

我還嘗試添加alingnItems:center到root：

root: {
        flex: 1,
        height: '100%',
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      }

但結果不是預期的：

在 React Native 中水平居中元素

uj5u.com熱心網友回復：

嘗試將專案樣式物件更改為：

item: {
    borderColor: 'rgba(0,0,0,0.2)',
    position: 'absolute',
    top: '80%',
    left:0,
    width:"100%",
    alignItems:"center",
    justifyContent:"center"
  },

uj5u.com熱心網友回復：

在需要使用 flex 屬性之前不要使用位置。

return (
    <View style={styles.root}>
      <View style={styles.container}>
        <SafeAreaView style={HEADER}>
          <SliderBox
            style={{ height: '100%' }}
            currentImageEmitter={index => setCurrentSliderNumber(index)}
            images={data.images}>
          </SliderBox>
        </SafeAreaView>
        {currentSliderNumber == data.images.length - 1 ? <View style={styles.item}>
          <Button
            style={styles.getStartedButton}
            appearance="ghost"
            status="control"
            onPress={onGetStartedPressed}
          >
            Get Started
          </Button>
   

 </View> : null}
      </View>
    </View>
  )

風格

const styles = StyleSheet.create({
  forgotPasswordButton: {
    paddingHorizontal: 0,
  },
  root: {
    flex: 1,
    height: '100%',
    backgroundColor: '#fff'
  },
  container: {
    borderColor: 'rgba(0,0,0,0.2)',
    flexGrow:1,
    justifyContent: "space-between"
  },
  getStartedButton: {
    marginVertical: 12,
    backgroundColor: 'red',
    alignSelf:"center",
    flexGrow:2,
  },
  item: {
    borderColor: 'rgba(0,0,0,0.2)',
    flexGrow:1,
    justifyContent:"center",
    alignItem:"center",
  }, text: {
  }
})

查看布局檔案

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/436936.html

標籤：反应式

上一篇：【第三十二期】春招 Golang實習面經七牛

下一篇：推薦 10 本 Go 經典書籍，從入門到進階（含下載方式）