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 (
      <ScrollView>
          <Text>Some Text</Text>
          <View>
             <Image source={
  {uri:'https://reactnactive.dev/docs/assets/p_cat2.png',}}
             style={
  {width:200,height:200}}
             />
           </View>
           <TextInput style={
  {
           height:40,backgroundColor:'gray',borderWidth:1}}/>
         </ScrollView>
        );
       }
       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!