description

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

- 3 ماه پیش
توسط Ameer آپدیت شد
علیرضا صفدری ( 3542 تجربه )
4 ماه پیش

کدم به صورت زیر هست،

import React, {Component} from 'react';
import Article from "./Article";

export default class Articles extends Component {

    componentWillMount() {
        this.setState({
            articles: [
                {
                    imageUrl : {uri:'https://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} />
        )
    }
}

توی هروجی تیتر و متن نشون داده میشه ولی تصویر نشون نمیده، چه کنم؟

علیرضا اصلانی ( 4121 تجربه )
4 ماه پیش

مقدار imageUrl رو توی state به صورت یه استرینگ خالی که لینک عکس فقط توشه مقدار دهی کنین بعد داخل کامپوننت Article اونجا uri رو به سورس تصویرتون بدید که دچار اشتباه نشید

<Image source={{uri: this.props.image}} />
علیرضا صفدری ( 3542 تجربه )
4 ماه پیش

درست نشده هنوز

علیرضا اصلانی ( 4121 تجربه )
4 ماه پیش

خب الان کد کامپوننت 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://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} />
        )
    }
}
علیرضا صفدری ( 3542 تجربه )
4 ماه پیش

یک درس جدید رفتم جلو منتهی هنوزم تصاویر نشون نمیده؛
این کد 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://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
                    title: 'آموزش کامل Flexbox',
                    body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
                },
                {
                    imageUrl : 'https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
                    title: 'آموزش کامل Flexbox',
                    body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
                },
                {
                    imageUrl : 'https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
                    title: 'آموزش کامل Flexbox',
                    body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
                },
                {
                    imageUrl : 'https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
                    title: 'آموزش کامل Flexbox',
                    body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
                },
                {
                    imageUrl : 'https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
                    title: 'آموزش کامل Flexbox',
                    body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
                },
                {
                    imageUrl : 'https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
                    title: 'آموزش کامل Flexbox',
                    body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
                },
                {
                    imageUrl : 'https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg',
                    title: 'آموزش کامل Flexbox',
                    body: 'فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطاف انعطافانعطافانعطاف',
                },
            ]
        })
    }

    render() {
        return (
            <Articles articles={ this.state.articles } />
        )
    }
}

همه چیز خوب کار میکنه بجز نشون ندادن تصاویر و کار نکردن elevation

Ameer ( 70 تجربه )
3 ماه پیش

تگ 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>
برای ارسال پاسخ باید وارد سایت شوید