React Native, JavaScript tabanlı bir mobil uygulama geliştirme framework'üdür. Komponent tabanlı yapısı, React Native'in gücünü ve esnekliğini sağlar. Bu blog yazısında, React Native'de kullanılabilen temel komponentlerin kullanımını ve özelliklerini keşfedeceğiz. React Native komponentlerini doğru bir şekilde kullanmak, uygulamanızın görünümünü ve davranışını kontrol etmenizi sağlar.

React Native Komponentleri: Kullanım ve Özellikler Nelerdir?

1. View Komponenti: View komponenti, birçok temel komponentin atasıdır ve uygulamanızın ekranında bir konteyner oluşturur. Bu bölümde, View komponentinin nasıl kullanılacağını ve nasıl stilize edileceğini açıklayabilirsiniz. Ayrıca, View komponentinin layout yönetimi ve flexbox kullanımı gibi özelliklerini de inceleyebilirsiniz. 

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

   const ViewBoxesWithColorAndText = () => {
  return (
    <View
      style={{
        flexDirection: 'row',
        height: 100,
        padding: 20,
      }}>
      <View style={{backgroundColor: 'blue', flex: 0.3}} />
      <View style={{backgroundColor: 'red', flex: 0.5}} />
      <Text>Hello World!</Text>
    </View>
  );
};

   export default ViewBoxesWithColorAndText;

2. Text Komponenti: Text komponenti, uygulamanızda metin göstermek için kullanılır. Bu bölümde, Text komponentinin nasıl kullanılacağını, metin stilini nasıl ayarlayabileceğinizi ve metin biçimlendirme seçeneklerini nasıl kullanabileceğinizi açıklayabilirsiniz. Ayrıca, yerleşik metin bileşenlerini (örneğin, Başlık, Paragraf) ve metin yerelleştirme işlemlerini de ele alabilirsiniz. 

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

   const BoldAndBeautiful = () => {
  return (
    <Text style={styles.baseText}>
      I am bold
      <Text style={styles.innerText}> and red</Text>
    </Text>
  );
};

   const styles = StyleSheet.create({
  baseText: {
    fontWeight: 'bold',
  },
  innerText: {
    color: 'red',
  },
});

   export default BoldAndBeautiful;

3. Image Komponenti: Image komponenti, uygulamanızda görüntüleri görüntülemek için kullanılır. Bu bölümde, Image komponentini nasıl kullanacağınızı, yerel veya uzaktaki bir görüntüyü nasıl yükleyeceğinizi ve görüntü stilini nasıl özelleştireceğinizi açıklayabilirsiniz. Ayrıca, görüntü optimizasyonu ve yerel kaynaklara erişim gibi ilgili konulara da değinebilirsiniz. 

   
   import React from 'react';
import {View, Image, StyleSheet} from 'react-native';

   const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
});

   const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
      <Image
        style={styles.logo}
        source={{
          uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }}
      />
    </View>
  );
};

   export default DisplayAnImage;

4. Button Komponenti: Button komponenti, kullanıcının etkileşime geçebileceği bir düğme oluşturur. Bu bölümde, Button komponentini nasıl kullanacağınızı, basit veya özel düğme stilleri oluşturmanın yöntemlerini ve düğme olaylarına nasıl tepki verileceğini açıklayabilirsiniz. Ayrıca, dokunma geri bildirimleri ve erişilebilirlik gibi düğme özelliklerini de ele alabilirsiniz. 

   
   import React from 'react';
import {
  StyleSheet,
  Button,
  View,
  SafeAreaView,
  Text,
  Alert,
} from 'react-native';

   const Separator = () => <View style={styles.separator} />;

   const App = () => (
  <SafeAreaView style={styles.container}>
    <View>
      <Text style={styles.title}>
        The title and onPress handler are required. It is recommended to set
        accessibilityLabel to help make your app usable by everyone.
      </Text>
      <Button
        title="Press me"
        onPress={() => Alert.alert('Simple Button pressed')}
      />
    </View>
    <Separator />
    <View>
      <Text style={styles.title}>
        Adjust the color in a way that looks standard on each platform. On iOS,
        the color prop controls the color of the text. On Android, the color
        adjusts the background color of the button.
      </Text>
      <Button
        title="Press me"
        color="#f194ff"
        onPress={() => Alert.alert('Button with adjusted color pressed')}
      />
    </View>
    <Separator />
    <View>
      <Text style={styles.title}>
        All interaction for the component are disabled.
      </Text>
      <Button
        title="Press me"
        disabled
        onPress={() => Alert.alert('Cannot press this one')}
      />
    </View>
    <Separator />
    <View>
      <Text style={styles.title}>
        This layout strategy lets the title define the width of the button.
      </Text>
      <View style={styles.fixToText}>
        <Button
          title="Left button"
          onPress={() => Alert.alert('Left button pressed')}
        />
        <Button
          title="Right button"
          onPress={() => Alert.alert('Right button pressed')}
        />
      </View>
    </View>
  </SafeAreaView>
);

   const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginHorizontal: 16,
  },
  title: {
    textAlign: 'center',
    marginVertical: 8,
  },
  fixToText: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  separator: {
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

   export default App;

5. TextInput Komponenti: TextInput komponenti, kullanıcının metin girişi yapabileceği bir alan oluşturur. Bu bölümde, TextInput komponentini nasıl kullanacağınızı, metin girişi sınırlamalarını nasıl uygulayabileceğinizi ve metin girişi olaylarına nasıl tepki verebileceğinizi açıklayabilirsiniz. Ayrıca, metin doğrulama ve klavye türleri gibi ilgili konuları da ele alabilirsiniz. 

   
   import React from 'react';
import {SafeAreaView, StyleSheet, TextInput} from 'react-native';

   const TextInputExample = () => {
  const [text, onChangeText] = React.useState('Useless Text');
  const [number, onChangeNumber] = React.useState('');

     return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
      <TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="useless placeholder"
        keyboardType="numeric"
      />
    </SafeAreaView>
  );
};

   const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

   export default TextInputExample;

Bu blog yazısında, React Native'de kullanılabilen temel komponentlerin kullanımını ve özelliklerini keşfettik. View, Text, Image, Button ve TextInput gibi komponentler, uygulamanızın görünümünü ve kullanıcı etkileşimini kontrol etmenize yardımcı olur. Doğru şekilde kullanıldığında, bu komponentler uygulamanızın kullanıcı deneyimini geliştirmenize katkı sağlar. Daha fazla React Native komponentini keşfetmek ve özelliklerini kullanmak için resmi belgelere başvurmanızı öneririm.