如何在 react-native 中为按钮添加图标答案

【问题标题】：How to add an icon to a button in react-native如何在 react-native 中为按钮添加图标
【发布时间】：2021-05-17 17:07:41
【问题描述】：

我正在 react-native 上使用 <TouchableOpacity> 创建一个按钮。

            <View style = {{
                flex: 1,
                justifyContent: 'flex-end',
                paddingBottom: 30,
            }}>
                <TouchableOpacity 
                    style = {{
                        justifyContent: 'center',
                        padding: 10,
                        height: 30,
                        width: '100%',
                        flexDirection: 'row',
                    }}
                    onPress = {() => {
                        this.props.navigation.navigate('Login');
                        firebase.auth().signOut();
                    }}>
                    <Icon
                        name = 'log-out'
                        type = 'feather'
                        color = 'black' />
                    <Text style = {{
                        fontWeight: 100,
                        fontSize: 20
                    }}>
                        LOGOUT
                    </Text>
                </TouchableOpacity>
            </View>

The output

如何将图标和文本左对齐？有没有办法让图标完全出现？

【问题讨论】：

标签： javascript reactjs react-native jsx

【解决方案1】：

您可以使用与图标相同的图像
您可以从谷歌字体图标下载一些很棒的图标
看看这个https://fonts.google.com/icons

所以你的代码将是

<View style = {{
            flex: 1,
            justifyContent: 'flex-end',
            paddingBottom: 30,
        }}>
            <TouchableOpacity 
                style = {{
                    justifyContent: 'center',
                    padding: 10,
                    height: 30,
                    width: '100%',
                    flexDirection: 'row',
                }}
                onPress = {() => {
                    this.props.navigation.navigate('Login');
                    firebase.auth().signOut();
                }}>
                
                    <Image src={source to your image} style={{add your style}}/>
             
            </TouchableOpacity>
        </View>

【讨论】：