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

Question

如何创建这样的按钮：

使用react-native？

Answer 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>