如何使用 react-native 创建带有图标的按钮？答案

【问题标题】：How to create button with icon using react-native?如何使用 react-native 创建带有图标的按钮？
【发布时间】：2015-11-27 15:22:11
【问题描述】：

如何创建这样的按钮：

使用本机反应？

【问题讨论】：

标签： javascript react-native

【解决方案1】：

有很多方法可以回答这个问题，具体取决于您在应用程序中还做了什么。我发现在 React Native 中进行样式设置时很重要的一件事是理解 FlexBox 属性，这将允许您在学习它们后进行几乎任何可以想象的布局。

我已经着手设置了一个示例项目here，其按钮类似于上面在代码中实现的按钮，并且我还在下面发布了代码。请注意，有很多方法可以实现这一点，这只是众多方法中的一种。

https://rnplay.org/apps/yNKoGA

<TouchableHighlight underlayColor="#ededed" style={{borderRadius:10, height:60, borderWidth:1, marginLeft:80, marginRight:80}}>
    <View style={{flexDirection: 'row', }}>
        <View>
            <Image style={{marginTop:9, marginLeft:4,width:40, height:40}} source={{uri: 'http://www.iconpng.com/png/iconographicons/basketball19.png'}} />
        </View>
        <Text style={{ fontSize:20, marginLeft:10, marginTop:16 }}>Login</Text>
    </View>
</TouchableHighlight>

【讨论】：

我唯一要补充的是，您不需要单独的流向视图。您可以直接在 TouchableHighlight 包装视图上定义它以及borderRadius 等。您也不需要视图来包装图像。并且通常使用“alignItems：'center'”将按钮中的图像和文本垂直居中。