javascript - 如何使用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>