v2.5.2
Giriş yap

Html Css Butonu React Native'e Çevirme

mcanvphp
355 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Aşağıdaki attığım koddaki gibi bir butonum var ancak bunu react native stylesheet haline çevirmek istiyorum
Nasıl yaparım?

<button class="button">
  Test button
</button>
.button {
    border-radius: 48px;
    border: 2px solid #FFF;
    background: linear-gradient(345deg, #FFF2DC 10.58%, #FFF 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.13), 0px -3px 4px 0px #FF7318 inset;
    border-radius: 30px;
    padding: 10px 30px;
    height: 60px;
    color: #CE7F41;
    font-weight: bold;
    cursor: pointer;
}
ebykdrms
517 gün önce

Şimdi örnek yazmam mümkün değil ama sanırım şu kütüphaneler yardımcı olabilir:
box-shadow için: react-native-neomorph-shadows
gradient için: react-native-linear-gradient

ChatGPT4'ten bu kütüphaneleri kullanarak bir örnek hazırlamasını istedim:

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { Neomorph } from 'react-native-neomorph-shadows';

const StyledButton = () => {
    return (
        <Neomorph
            inner // <- enable shadow inside of neomorph
            swapShadows // <- change zIndex of each shadow color
            style={{
                shadowRadius: 4,
                borderRadius: 48,
                backgroundColor: '#FFF',
                width: 200,
                height: 60,
                alignItems: 'center',
                justifyContent: 'center',
            }}>
            <TouchableOpacity
                style={{
                    borderRadius: 48,
                    borderColor: '#FFF',
                    height: '100%',
                    width: '100%',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}
                activeOpacity={0.6}>
                <LinearGradient
                    colors={['#FFF2DC', '#FFF']}
                    style={{
                        position: 'absolute',
                        left: 0,
                        right: 0,
                        top: 0,
                        height: '100%',
                        borderRadius: 48,
                    }}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 0 }}/>
                <Text style={{ color: '#CE7F41', fontWeight: 'bold' }}>Test Button</Text>
            </TouchableOpacity>
        </Neomorph>
    );
};
export default StyledButton;

Ama tabi muhtemelen düzgün çalışmaz. GPT bu kütüphanelerin çok eski hallerinden örnek veriyor.
Ama sen kütüphanelerin dokümantasyonu üzerinden ihtiyacına uygun bi'şeyler yapabilirsin.