ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์ProgrammingReact native มันทำแบบนี้ได้ไหมครับ?
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: React native มันทำแบบนี้ได้ไหมครับ?  (อ่าน 1434 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
banban
สมุนแก๊งเสียว
*

พลังน้ำใจ: 37
ออฟไลน์ ออฟไลน์

กระทู้: 551



ดูรายละเอียด
« เมื่อ: 09 มิถุนายน 2019, 04:14:53 »

ตามภาพนี้ ไม่ใช่ WEB VIEW นะครับ แต่เป็นการดึง html+css+js มาจากที่อื่น มาแสดงผลใน App ที่เป็น React Native 100%

« แก้ไขครั้งสุดท้าย: 09 กรกฎาคม 2019, 04:39:21 โดย banban » บันทึกการเข้า
jomynn
Verified Seller
สมุนแก๊งเสียว
*

พลังน้ำใจ: 75
ออฟไลน์ ออฟไลน์

กระทู้: 762



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 09 มิถุนายน 2019, 08:35:08 »

ผมว่า ดึงมาได้แต่ Image แล้วมาใส่ event click ให้ popup Hello ได้อยู๋นะ


ผม เจอ ตัวอย่างมาก แต่ไม่ตรง ความต้องการต้องดัดแปลงดู

โค๊ด:
import { View, Image, Text, StyleSheet, Platform, ActivityIndicator } from 'react-native';
 
export default class App extends Component<{}>
{
    constructor()
    {
        super();
 
        this.state = { width: 0, height: 0, loading: true }
 
        this.uri = 'https://tutorialscapital.com/wp-content/uploads/2017/09/background.jpg';
    }
 
    componentDidMount()
    {
        Image.getSize( this.uri, ( width, height ) =>
        {
            this.setState({ width: width, height: height, loading: false });
        }, ( error ) =>
        {
            this.setState({ loading: false });
            console.log( error );
        });
    }
 
    render()
    {
        return(
            <View style = { styles.container }>
                <View style = { styles.imageContainer }>
                    {
                        ( this.state.loading )
                        ?
                            <ActivityIndicator size = "large" />
                        :
                            ( <Image source = {{ uri: this.uri }} style = { styles.image } /> )
                    }
                    <View style = { styles.showDimensionsView }>
                        <Text style = { styles.text }>{ this.state.width }(w) X { this.state.height }(h)</Text>
                    </View>                   
                </View>
            </View>
        );
    }   
}
 
const styles = StyleSheet.create(
{
    container:
    {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: ( Platform.OS === 'ios' ? 20 : 0 )
    },
 
    imageContainer:
    {
        position: 'relative',
        width: 200,
        height: 250,
        justifyContent: 'center',
        alignItems: 'center'
    },
 
    image:
    {
        resizeMode: 'cover',
        width: '100%',
        height: '100%'
    },
 
    showDimensionsView:
    {
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0,0,0,0.6)',
        alignItems: 'center',
        paddingTop: 15,
        paddingBottom: 15
    },
 
    text:
    {
        fontSize: 20,
        color: 'black',
        color: 'rgba(255,255,255,0.8)'
    }
});
บันทึกการเข้า

pommalwkub
Newbie
*

พลังน้ำใจ: 0
ออฟไลน์ ออฟไลน์

กระทู้: 99



ดูรายละเอียด
« ตอบ #2 เมื่อ: 08 กรกฎาคม 2019, 20:27:44 »

มันคือ?
บันทึกการเข้า

หน้า: [1]   ขึ้นบน
พิมพ์