如何在屏幕上设置中心按钮 - 本机基础答案

【问题标题】：how to set center a button on screen - native base如何在屏幕上设置中心按钮 - 本机基础
【发布时间】：2018-09-16 15:23:49
【问题描述】：

我正在使用原生基础库的按钮。

这是我的全部代码：

  <LinearGradient
      start={{x: 0.0, y: 0.1}} end={{x: 0.5, y: 1.0}}
      locations={[0.2,0.23,0.9]}
      colors={[randomColor1,randomColor1, randomColor2]}
      style={{flex:1,height:'100%',width:'100%',flexDirection: 'column'}}>

      <View style={{width:'100%',height:'100%',flexDirection:'column',flex:1}}>
        <View style={{flexDirection:'column',alignItems:'center',justifyContent:'center'}}>
          <Text style={{fontSize:22,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center'}}>Powerful Composition</Text>
          <Button style={{textAlign:'center',justifyContent: 'center',alignItems: 'center',paddingLeft:40,paddingRight:40,marginTop:10,height:40}} light><Text style={{textAlign:'center'}}> JOIN </Text></Button>
        </View>

        <Text style={{fontSize:18,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center',position:'absolute',left:0,bottom:0,marginLeft:6,marginBottom:6}}>607.8 K Votes</Text>

        <Text style={{fontSize:18,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center',position:'absolute',right:0,bottom:0,marginLeft:6,marginBottom:6,marginRight:4}}>9 Days Left</Text>

      </View>


  </LinearGradient>

我的Text 是屏幕的中心。但它下方的Button 在左侧屏幕上！

我哪里错了？

【问题讨论】：

标签： javascript react-native native-base

【解决方案1】：

您需要在样式中添加样式alignSelf: 'center'

<Button style={{alignSelf:'center',{/*Other Styles*/}}}> JOIN </Text></Button>

【讨论】：

【解决方案2】：

如果AlignSelf 不起作用，请尝试justifyContent: 'center'。

【讨论】：

【解决方案3】：

您应该使用 title 属性，而不是将 Text 元素传递给您的 Button 组件

<Button 
  style={{
    textAlign:'center',
    justifyContent: 'center',
    alignItems: 'center',
    paddingLeft:40,
    paddingRight:40,
    marginTop:10,
    height:40
  }}
  light
  title="JOIN"
/>

您可以在this snack 中看到按钮居中

【讨论】：

作者要求的原生基础库不支持。