React-Native组件,JSX,Props属性，state状态

认识React nactive

import React from 'react';
//React Nactive核心组件的引入方式
import {View,Text,Image,ScrollView,TextInput} from 'reactive-nactive';
const App=()=>{
   return (
      
          Some Text
          
             
           
           
         
        );
       }
       export default App;
                 

React基础：

import React from 'react';
import {Text} from 'react-native';
export default function Cat(){
return (
   <Text>Hello,I am your cat!Text>
);
}//运行结果为   Hello,I am your cat!

要定义一个Cat组件，第一步要使用import语句引入React以及React Nactive 的Text组件：

import react from 'react';
import {Text} from 'react-nactive';

然后一个简单的函数就可以作为一个组件：

function Cat(){}

这个函数的返回值就会被渲染为一个React元素。这里Cat会渲染一个Text元素

function Cat(){
  return <Text>Hello,I am your cat!Text>;
  }

这里我们还使用

export default

语句来导出这个组件，以使其可以在其他地方引入使用

export default function Cat(){
  return <Text>Hello,I am your cat!Text>;
  }

return 后面的语句是一种简化 React 元素的写法，这种语法名字叫做 JSX。

JSX

import React from 'react';
import {Text} from 'react-nactive';
export default function Ca(){
  const name="Maru";
  return (
    <Text>hello,I am {name}!Text>
    );
    }//运行结果为hello,I am Maru!

括号中可以使用任意Javascript表达式，包括调用函数，例如{getFullName(“Rum”,“Tum”,"Tugger)}

import React from 'react';
import {Text} from 'react-nactive';
export default function Cat(){
   function getFullName(firstName,secondName,thirdNameName){
     return firstName+""+secondName+" "+thirdName; 
}
return(
  <Text>
      Hello,I am {getFullName("Rum","Tum","Tugger)}!
  Text>
);
}//运行结果为Hello,I am RumTum Tugger!

自定义组件

将Text,TextInput嵌入到View中，React Nactive会将他们一起渲染出来

import React from 'react';
import {Text,TextInput,View} from 'react-nactive';
export default function Cat(){
  return(
   <View>
     <Text>Hello, I am ...Text>
     
    View>
);
}

运行结果为：

Props属性：

代码示例：

import React from 'react';
import { Text,View} from 'react-native';
function cat(props){
  return(
     <View>
        <Text>Hello,I am {props.name}!Text>
      View>
   );
 }
 export default function Cafe(){
   return (
      <View>
         <Cat name="Maru"/>
         <Cat name="Lully"/>
         <Cat name="JellyHon"/>
      View>
   );
}//运行结果为：Hello,I am Maru!
               Hello,I am Lully!
               Hello,I am JellyHon!

例如，当你引用Image组件时，你通过一个prop命名为图片的来源去定义图片的展示

import React from 'react';
import {Text,View,Image} from 'reactive-native';
export default function CatApp(){
  return (
     <View>
        <Image 
            source="https://facebook.github.ioassets/p_cat1.png"
            style={{width:200,height:200}} />
         <Text>Hello,I am your cat!Tetx>
       View>
      );
      }//运行结果：
                 图片  
                 Hello,I am your cat!

Image 有很多不同的 props，style也是其中之一，它接受对象形式的样式和布局键值对.

State状态

函数组件的状态State:

import React ,{useState} from "react";
import {Button,Text,View} from "react-nactive";
function Cat(props){
   const [isHungry,setIsHungry] = useState(true);
   return (
      <View>
         <Text>
            I am {props.name},add I am {isHungry? "hungry":"full"}!Text>
           {
           setIsHungry(false);}} disabled={!isHungry} title={isHungry?"Pour me some milk,please!":"Thank you!"}/>
           View>
           );
           }
           export default function Cafe(){
           return (
           <>
           <Cat name="Munkustrap" />
           <Cat name="Spot" />
           
           );
      }
           

运行结果：

首先要从react中引入useState:

import React ,{useState} from 'react';

然后可以通过在函数内调用useState来为组件声明状态。

function Cat(props){
   const [isHungry,setIsHungry]=useSate(true);
   //...
}

也可以使用useState来记录各种类型的数据：

string numbers Booleans arrays objects.

接下来你可以添加按钮核心组件并给他一个按压的prop：

{
     setIsHungry(false);
}}
//...
/>

现在当用户点击按钮时，onPress函数会被触发，从而调用setIsHungry(false).