React Native学习（一） 入门基础

陈贺强
481 阅读5分钟

Hello World

import React from 'react';
import { Text, View } from 'react-native';

const YourApp = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>
        Try editing me! 🎉
      </Text>
    </View>
  );
}

export default YourApp;

Snack Player : 沙盒环境 Expo公司提供的演示学习React Native的交互工具。可以直接运行代码 snack.expo.dev

函数式组件与Class组件

React可以使用函数式组件或者Class组件。

函数式组件

import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
}

export default HelloWorldApp;

Class组件

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
        }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

export default HelloWorldApp;

React基础

React Native的基础是React。

几个React核心概念：

  • components（组件）

    React中元素构成组件（复杂组件是由多个组件构成），组件又构成了应用。React核心思想是组件化，其中组件通过属性（props）和状态（state）传递数据

  • jSX

    React使用JSX来替代常规的JavaScript。JSX是一个看起来很像XML的Javascript的语法扩展

  • props属性

  • state 状态

尝试写一个组件

import React from 'react';
import { Text } from 'react-native';

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

export default Cat;

定义一个Cat组件 ，第一步使用import 来引入React和React Native的Text组件

import React from 'react'; import {Text} from 'react-native';

然后一个简单的函数作为组件

const Cat = ()->{};

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

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

上面的代码使用了export default 语句来导出这个组件，以便在其他地方引入使用

上面只是导出组件的写法之一[handy cheatsheet on JavaScript ] 总结了imports和exports整理的各种不同的写法

Hello,I am your cat!是一种简化的React元素的写法，这种语法名字叫做JSX

JSX React和React Native都使用JSX语法。这种语法使你可以在Javascript中直接输出元素

这里我们为猫声明一个变量name并用括号放在中

import React from 'react'
import {Text} from 'react-native'

const Cat = ()=>{
    const name="Maru";
    return (
        <Text>Hello, I am{name}!</Text>
    
    );
}
export default Cat;

括号内可以使用任意JavaScript表达式，包括调用函数

    import React from 'react';
    import {Text} from 'react-native';
    
    const getFullName = (firstName,secondName,thirdName) =>{
        return firstName+" "+secondName+" "+thirdName;
    }
    
    const Cat = ()=>{
    return (
        <Text>
            Hello,I am {getFullName("Rum","Tum"，"Tugger")}!
        </Text>
    
    );
   
    }
    export default Cat;

在别处通过来引用这个组件

const Cafe = ()=>{
    return (
        <Text>Welcome!</Text>
        <Cat />
        <Cat />
    )
}

我们把包含其他组件的组件成为父组件或者父容器，这里Cafe就是一个父组件，而Cat是子组件

Props属性

Props 是 ”properties“(属性)的简写。Props使我们可以定制组件，比如可以给每只一个不同的名字

import React from 'react';
import {Text,View} from 'react-native'

const Cat =(props)=>{
    return(
        <View>
            <Text>Hello, I am {props.name}!</Text>
        </View>
    
    );
}

const Cafe=()=>{
    return (
        <View>
            <Cat name="maru"/>
            <Cat  name="jellylorum"/>
            <Cat name="Spot"/>
        </View>
    
    );

}
export default Cafe;

Image组件的source属性

<Image 
    source={{
    uri:"https://reactnative.dev/docs/assets/p_cat1.png"
    }}
    style={{width:200,height:200}}
/>

style属性的宽高所使用双层括号{{}}, 因为JS引用值的时候需要使用{}. 而JS中定义对象时，也需要大括号：{width:200,height:200}.所以使用到了双层括号{{}}

State状态

如果把props理解为制定组件渲染的参数，那么state就像是组件的私人数据数据记录。状态用于记录那些随时间或者用户交互而变化的数据。状态使组件拥有了记忆

按照惯例 props用来配置组件的第一次渲染（初始状态）。state用来记录组件中任意可能随时间变化的数据。


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

const Cat =(props) =>{
    const [isHungry,setIsHungry] = useState(true);
    return(
        <View>
            <Text>I am {props.name},and I am {isHungry? "hungrty":"full"}</Text>
            
        <Button 
               onPress={()=>{
                   setIsHungry(false);
               }}
               disabled={!isHungry}
               title={isHungry?"Pour me some milk, please!" : "Thank you!"}
         />
        </View>
    
    );

}

const Cafe = ()=>{
    return(
    <>
    <Cat name="Mukustrap" />
    <Cat name="Spot" />
    </>
    
    );
}
export default Cafe;

1.首先从react中引入useState：

import React,{useState} from 'react';

2.在函数内使用useState来为组件声明状态，在本实例中useState创建了一个isHungry状态变量：

    const Cat =（props) =>{
        const[isHungry,setIsHungry]= useState(true);
    }

可以使用useState来记录各种类型的数据 ，例如记录猫咪被爱抚的次数：const[timesPetted,setTimespetted]= useState[0]

useState实质上做了两件事：

  • 创建了一个状态变量 并赋予一个初始值
  • 创建一个函数用于设置此状态变量的值 setIsHungry

<></> 这一对JSX标签成为Fragments(片段) JSX语法要求根元素必须为单个元素。如果我们需要在根节点并列多个元素，在此之前不得不额外套一个没有实际意义的View。但是有个Fragment后就不需要引入额外的容器视图了。

处理文本输入

import React,{useState} from 'react';
import {Text,TextInput,View} from 'react-native';

const PizzaTranslator = ()=>{
    const [text,setText] = useState('')
    return(
        <View style={{padding:10}}>
            <Textinput 
                style={{padding:40}}
                placeholder="Type here to translate!"
                onChangeText={text=>setText(text)}
                defaultValue={text}
            />
        
        <Text style={{padding:10,fontSize:42}}>
        {text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
        
        </View>
    
    );
}

export default PizzaTranslator

特定平台代码

React Native提供了两种方法区分平台：

  • 使用Platform欧快
  • 使用特定扩展名

Platform模块

    import {Platform,StyleSheet} from 'react-native'
    
    const styles = StyleSheet.create({
        height:Platform.OS === 'ios'?200:100
    });

Platform.OS 在IOS上会返回ios，而在Android设备或模拟器上返回android

    import {Platform,StyleSheet} from 'react-native'
    
    const styles = StyleSheet.create({
        container:{
            flex:1,
            ...Platform.select({
                ios:{backgroundColor:'red'},
                android:{backgroundColor:'blue'}
            })
        }
    });

针对不同平台返回不同组件

    const Component = Platform.select({
        ios:()=>request('ComponentIOS')
        android:()=>require('ComponentAndroid')
    });
    
    <Component />

检测Android版本

import {Platform} form 'react-native'
if(Platform.Version = 25){
    console.log('Running on Nougat!')
}

特定平台扩展名

React native会检测某个文件是否具有 .ios 或者 .android 的扩展名。然后根据当前运行的平台自动加载正确对应的文件

BigButton.ios.js
BigButton.android.js


import BigButton form './BigButton'

使用滚动视图

    import React from 'react';
    import {Image,ScrollView,Text} from 'react-native';
    
    const logo={
        uri:"https://reactnative.dev/img/tiny_logo.png",
        width:64,
        height:64
    }
    
    export default App = ()=>(
        <ScrollView>
            <Text style={{fontSize:96}}>Scroll me plz</Text>
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
        </ScrollView>
    
    )

使用长列表

React Native提供了FlatList 和 SectionList展示长列表数据的组件

FlatList 更适合长列表，且元素个数可以增删。FlatList并不立刻渲染所有元素，而是优先渲染屏幕上可见的元素

    import React from 'react'
    import {FlatList,StyleSheet,Text,View} from 'react-native'
    
    const styles = StyleSheet.creat({
        container:{
            flex:1,
            paddingTop:22
        },
        item:{
            padding:10,
            fontSize:18,
            height:44
        }
    
    });
    
    const FlatListBasiscs = ()=>{
        return (
            <View style={styles.container}>
            <FlatView 
                data={[
                {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
                
                ]}
                
                renderItem={({item})=>
                    <Text style={styles.item}>{item.key}</Text>
                }
            />

            </View>
            
        
        );
    
    
    }

如果要渲染一组需要分组的数据，也许还带有分组的标签的，那么SectionList 将是不错的选择


import React from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

const SectionListBasics = () => {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
}

export default SectionListBasics;
avatar
文章
阅读
粉丝