Props:Componentler arasında haberleşme yada parametre aktarımı(style,title,value….)

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,ScrollView,Dimensions} from 'react-native';
import CardView from './src/Components/CardView';


export default class App extends Component {

  constructor(props)
  {
    super(props);
    this.state={

      width:Dimensions.get('screen').width
    };

  }
///props iki component arasında parametre aktarımı 

  doldur()
  {
     let card_array=[];
     for(let i=0;i<20;i++)
     {
       card_array.push(
         <View 
        style={{height:100,width:this.state.width,marginTop:1}} key={i.toString()}>
       <CardView 
       View_style={{height:100,width:this.state.width,flexDirection:'row',alignSelf:"flex-start"}}
       Image_style={{height:100,width:100}} 
       Text_style={{height:100,width:this.state.width-100,textAlignVertical:'center',marginLeft:1}}
       source={require('./src/Resource/Icon/react-icon.png')}
       Text='dasddsadsadasdasdsadasdasdsadsasdasdasdsadsadsaadad' 
       ></CardView>
       </View>);
     }
return card_array;
  }

  render() {
    return (
      <View style={styles.container} onLayout={()=>{this.setState({width:Dimensions.get('screen').width})}}>
      <ScrollView style={{flex:1,flexDirection:'column'}}>
       {this.doldur()}
      </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection:'column',
    justifyContent: 'flex-start',
    backgroundColor: '#F5FCFF',
  },
 
});

 

CardView.js

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

export default class CardView extends Component{

constructor(props)
{
    super(props);
}


render(){

    //Bu komponentin alacağı paremetreler tanımlanıyor.
return(
<View style={this.props.View_style}>
<Image 
style={this.props.Image_style} 
source={this.props.source}>
</Image>
<Text 
numberOfLines={1} 
ellipsizeMode='tail' 
style={this.props.Text_style}>{this.props.Text}</Text>
</View>
);}
}