如何在 react-native 中的按鈕上添加圖標

Question

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

output

如何將圖標和文本左對齊？ 有沒有辦法讓圖標完全出現？

Answer 1

您可以使用與圖標相同的圖像
您可以從 google fonts 圖標下載一些很棒的圖標
看看這個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>