Html Css Butonu React Native'e Çevirme
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;
}
Ş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.