Html Css Butonu React Native'e Çevirme

mcanvphp 311 gün önce

242 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;
}

reactnative

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (3)

ebykdrms

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

#012682

mcanvphp

309 gün önce

react native de malesef inset shadow olmadığı için farklı bir çözüm bulmam lazım

#012680

hakankorkz

310 gün önce

hocam bunu direkt chat gpt yazabilirsiniz bence anında sonuç alacaksınız ben sizin için yaptım buyurun bakın

Aşağıda, verdiğiniz CSS kodunu React Native'e dönüştürülmüş hali bulunmaktadır:

import React from 'react';
import { StyleSheet, TouchableOpacity, Text } from 'react-native';

const AppButton = () => {
  return (
    <TouchableOpacity style={styles.button}>
      <Text style={styles.buttonText}>Test button</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    borderRadius: 30,
    borderWidth: 2,
    borderColor: '#FFF',
    backgroundColor: 'linear-gradient(345deg, #FFF2DC 10.58%, #FFF 100%)',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.13,
    shadowRadius: 4,
    elevation: 3,
    paddingVertical: 10,
    paddingHorizontal: 30,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    color: '#CE7F41',
    fontWeight: 'bold',
  },
});

export default AppButton;

Bu React Native bileşeni, TouchableOpacity bileşenini kullanarak bir düğme oluşturur. Stil tanımlamaları için StyleSheet kullanılır. button stilleri, buttonText stilleri ile birleştirilir ve TouchableOpacity bileşeninin içine yerleştirilir.

Lütfen dikkat edin ki, CSS'ten farklı olarak, React Native'de bazı stil özellikleri ve değerleri farklı olabilir. Bu nedenle, bazı özellikleri React Native'in kendi stilleriyle uyumlu hale getirmek için düzenlemek gerekebilir.

#012679