عدم نمایش تصاویر در ری اکت نیتیو

مقدار 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>