从零开始学RN

reactnative.dev/docs/

export default 以在整个应用程序中使用

import React, { useState } from "react"; improt {Button, Text, View, TextInput, Image} from "react-native";

function Cat(props){//定义方法 const name = "Mook";//定义变量 const [isHungry, setIsHungry] = useState(true);//定义变量 set,并进行初始化

retrun(//定义布局
<View>
<Text>I am {props.name}, and I am {isHungry ? "hungry":"full"}</Text> //文本框
<Text>I am {name}</Text> //文本框
<TextInput  //输入框
    style = {{ //样式
        height: 30,
        borderColor:'gray',
        borderWidth:1
     }}
/>
<Image //图像框
    source ="url.png"
    style={{
        width:200,
        height:200
    }}
/>
 <Button 
 onPress={
     ()=>{
        setIsHungry(false)
     }
 }
 />
</View>
);

}

export default function Cafe(){ retrun( ); }

export default class Cat extends Component{} 定义类

//列表视图 import React from 'react'; import {FlatList, StyleSheet, Text, View} from 'react-native'; export default function FlatListBasics(){ return( <FlatList data={[ {key: "A"}, {key: "B"}, {key: "C"}, {key: "D"}, ]} renderItem={({item})=>{item.key}} /> ); } //样式 const styles = StyleSheet.create({ container:{ flex:1, paddingTop:22 }, item:{ padding:10, fontSize:18, height:30 }, });

//通过Platform来指定特定平台android或者ios