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