如何在 react-native 中的按钮上添加图标

Question

I'm creating a button using <TouchableOpacity> on react-native.

            <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

How do I align the icon and text to the left? And is there a way I can make the icon fully appear?

Answer 1

You can use images that works same as icons
You can download some great icons from google fonts icons
check this out https://fonts.google.com/icons

So your code will be

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