顶部的原生基础图标按钮

Question

Native base 确实是一个很棒的样式库，用于设置 react / react-native 的样式。我只有一个关于图标按钮的问题，我希望顶部的图标和底部的文本不要对齐。我已经尝试 alignSelf:'center' 用于图标和文本，但它不起作用。任何人都可以帮忙吗？非常感谢。

<Button transparent style={styles.capturebtn}>
    <Icon name="camera" type="MaterialCommunityIcons" style={styles.capturebtnicon}/>
    <Text style={styles.capturebtntxt} uppercase={false}>Open Camera</Text>
</Button>   

  capturebtntxt:{
    alignSelf:'center',
    fontSize:15,
    fontFamily:'Gotham-Medium',
    color:'#AAAAAA'
  },
  capturebtnicon:{
    alignSelf:'center',
    color:'#E3E3E3',
    fontSize:35
  },
  capturebtn:{
    elevation:0,
    borderColor:'#e5e5e5',
    borderWidth:1,
    borderRadius:7,
    justifyContent:'center',
    alignItems:'center',
    width:((Dimensions.get('window').width - 150 - 60) / 2) - 10
  },

Answer 1

我发现 flexDirection: 'column' 按钮解决了这个问题。 =)

Answer 2

或者您可以使用 vertical

vertical - true - boolean - Use this prop to vertically align footer elements like icons and text

示例

顶部的原生基础图标按钮

Native base icon button on top

javascript

react-native

native-base