کدم به صورت زیر هست،
import React, {Component} from 'react';
import Article from "./Article";
export default class Articles extends Component {
componentWillMount() {
this.setState({
articles: [
{
imageUrl : {uri:'https://static.roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg'},
title: 'آموزش کامل Flexbox',
body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف',
},
{}
]
})
}
render() {
const article = this.state.articles[0];
return (
<Article image={article.imageUrl} body={article.body} title={article.title} />
)
}
}
توی هروجی تیتر و متن نشون داده میشه ولی تصویر نشون نمیده، چه کنم؟
مقدار imageUrl رو توی state به صورت یه استرینگ خالی که لینک عکس فقط توشه مقدار دهی کنین بعد داخل کامپوننت Article اونجا uri رو به سورس تصویرتون بدید که دچار اشتباه نشید
<Image source={{uri: this.props.image}} />
خب الان کد کامپوننت Article و همین کامپونتتون بعد ویرایش رو بذارید ببینیم کجای کار اشتباه نوشتید
راستی چطوری componentWillMount گذاشتین خطا نداده بهتون؟! اولا شما داخل constructor استیت هاتونو مقدار اولیه رو بهشون بدید اگرم خواستین اطلاعات فچ و استیت رو تغییر بدید داخل componentDidMount باید انجام بدین نه componentWillMount
الان این کامپوننتتون باید به این شکل بشه
import React, {Component} from 'react';
import Article from "./Article";
export default class Articles extends Component {
constructor(props) {
super(props);
this.state = {
articles: [
{
imageUrl : 'https://static.roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
title: 'آموزش کامل Flexbox',
body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف',
}
]
}
}
render() {
const article = this.state.articles[0];
return (
<Article image={article.imageUrl} body={article.body} title={article.title} />
)
}
}
یک درس جدید رفتم جلو منتهی هنوزم تصاویر نشون نمیده؛
این کد article:
import React, {Component} from 'react';
import {View, Image, Text, StyleSheet, Platform} from 'react-native';
export default class Article extends Component {
render() {
const {image, body, title} = this.props;
return (
<View style={styles.container}>
<Image source={{ uri: image }} style={styles.image}/>
<View style={{ padding:10 }}>
<Text style={styles.title}>{title}</Text>
<Text numberOfLines={3} style={styles.body}>{body}</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
backgroundColor:'white',
elevation:1,
marginBottom:10,
flex:0.5,
margin:5,
},
image:{
width:'100%',
height:200,
overflow:'visible'
},
title:{
textAlign:'right',
fontSize:18,
...Platform.select({
ios:{
fontFamily:'IRANSansMobile',
fontWeight:"bold"
},
android:{
fontFamily:'IRANSansMobile_Bold'
}
})
},
body:{
textAlign:'right',
fontFamily:'IRANSansMobile',
fontSize:14,
}
})
و این هم کد articles:
import React, {Component} from 'react';
import Article from "./Article";
import {FlatList, StatusBar, View} from "react-native";
import Header from "./Header";
export default class Articles extends Component {
_renderFlatListArticles(article) {
return <Article image={article.imageUrl} body={article.body} title={article.title}/>
}
render() {
const {articles} = this.props;
return (
<View>
<StatusBar
hidden
/>
<FlatList
data={articles}
renderItem={({ item }) => this._renderFlatListArticles(item)}
keyExtractor={ (index, item) => index.toString()}
ListHeaderComponent={()=><Header />}
numColumns={2}
/>
</View>
)
}
}
و این هم کد app.js:
import React, {Component} from 'react';
import Articles from './components/Articles';
export default class app extends Component {
componentWillMount() {
this.setState({
articles: [
{
imageUrl : 'https://static.roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
title: 'آموزش کامل Flexbox',
body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
},
{
imageUrl : 'https://static.roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
title: 'آموزش کامل Flexbox',
body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
},
{
imageUrl : 'https://static.roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
title: 'آموزش کامل Flexbox',
body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
},
{
imageUrl : 'https://static.roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
title: 'آموزش کامل Flexbox',
body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
},
{
imageUrl : 'https://static.roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
title: 'آموزش کامل Flexbox',
body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
},
{
imageUrl : 'https://static.roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
title: 'آموزش کامل Flexbox',
body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
},
{
imageUrl : 'https://static.roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
title: 'آموزش کامل Flexbox',
body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
},
]
})
}
render() {
return (
<Articles articles={ this.state.articles } />
)
}
}
همه چیز خوب کار میکنه بجز نشون ندادن تصاویر و کار نکردن elevation
تگ image ر بذار زیر view
<View style={styles.container}>
<View style={{ padding:10 }}>
<Text style={styles.title}>{title}</Text>
<Text numberOfLines={3} style={styles.body}>{body}</Text>
</View>
<Image source={{ uri: image }} style={styles.image}/>
</View>
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟