react Native基础部分

安装步骤

• 1.安装依赖
  必须安装的依赖有：Node、Python2、JDK 和 Android Studio（ Node 的版本应大于等于 12，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本））
• 2.cmd安装
  nrm 管理npm下载源：npm install nrm -g和nrm ues taobao
  react-native-cli native脚手架：npm install react-native-cli-g
• 3.配置环境变量
  ANDROID_HOME---安卓sdk所在的目录
  platform-tools 平台工具：
  C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools;
  Java jdk/bin 目录：
  C:\Program Files\Java\jdk1.8.0_202\bin
• 4.初始化项目
  npx react-native init myapp
  添加安卓依赖包的源地址（阿里）：android/build.gradle
• 5.连接模拟器（mumu）
  先打开mumu模拟器，然后cmd输入adb connect 127.0.0.1:7555
• 6.运行项目
  npx react-native run-android
• 7.在VSCode里打开该项目
  修改APP.js，制作自己想要的页面效果

核心组件和原生组件

核心组件

JSX——是一种在 JavaScript 中嵌入 XML 结构的语法

例如：Hello world!写法

Props（属性）

render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      
    );
  }

{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到 JSX 语句中。括号的意思是括号内部为一个 js 变量或表达式，需要执行后取值。

自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。下面是一个例子：

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

class Greeting extends Component {
  render() {
    return (
      
        Hello {this.props.name}!
      
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      
        
        
        
      
    );
  }
}

最终3个名字会被依次输出。

State（状态）

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。

一般来说，需要在class中声明一个state对象，然后在需要修改时调用setState方法。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。你也可以使用一些“状态容器”比如Redux来统一管理数据流。
每次调用setState时，BlinkApp 都会重新执行 render 方法重新渲染。
【注意】：

• 一切界面变化都是状态state变化
• state的修改必须通过setState()方法
• this.state.likes = 100; // 这样的直接赋值修改无效！
• setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性
• setState 是异步操作，修改不会马上生效

样式的书写

在return里面写：

 
           我是内联样式文本
           我是行内样式文本
           我是内联+行内混合样式文本
         

在render函数外部定义样式：

const styles = StyleSheet.create({
  center:{justifyContent:"center",alignItems:"center"},
  row:{flexDirection:"row",justifyContent:"space-around"},
  col:{flex:1,height:180},
  big:{fontSize:48},
  red:{color:"#f30"}
});

文本输入框组件

TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。

触摸组件（Button）

alert("你好世界")}
            title="确定"
            color="#f30">

其中onPress是回调函数，title是按钮上显示的文字，color是按钮颜色；

也可以作为警告框，拥有多个选项，从而弹出不同内容：

Alert.alert("小胖别吃了好吗？","你已经160斤了！",[
              {text:'不行',onPress:()=>alert("小胖：不行我饿")},
              {text:'好吧',onPress:()=>alert("小胖：好吧我不吃了")},
              {text:'难过',onPress:()=>alert("小胖：我是单身狗，胖点怕啥")},
            ])}
            title="询问小胖"
            color="blue">

可以看到我们设置了三个选项，每一项都会弹出不同的内容，内容也是自己设置的；

触摸组件（Touchable 系列组件）

这个组件的样式是固定的。所以如果它的外观并不怎么搭配你的设计，那就需要使用TouchableOpacity或是TouchableNativeFeedback组件来定制自己所需要的按钮

• 使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。

• 在 Android 上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。

• TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。

• 如果想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback

• 某些场景中可能需要检测用户是否进行了长按操作。可以在上面列出的任意组件中使用onLongPress属性来实现。

滚动视图

ScrollView是一个通用的可滚动的容器，可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView 不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。
ScrollView适合于显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染

长列表

FlatList组件用于显示一个垂直的滚动列表，其中的元素之间的结构近似而仅数据不同。
FlatList和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设置好格式的组件来渲染。
例如渲染数据：

item.ID}
        data={this.state.movies}
        numColumns={3}   //一行显示3个
        columnWrapperStyle={styles.row} //增加下方写的样式
        renderItem={({item})=>{return(
          
            
              {item.MovieName}
          
        )}}
        />

• flatList长列表组件，
• keyExtractor是key抽取
• data数据指定
• numColumns行的数量，
• renderItem列的渲染
• columnWrapperStyle行的样式指定

网络请求

一般长列表的数据都是通过网络请求获取的；然后渲染到页面；
传统方式如下：

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',   //请求方式
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',    //请求头
  },
  body: 'key1=value1&key2=value2',     //请求体
});

上面的示例演示了如何发起请求。很多情况下，你还需要处理服务器回复的数据。网络请求天然是一种异步操作；异步的意思是你应该提取方法会返回一个Promise，这种模式可以简化异步风格的代码;
如下所示：

function getMoviesFromApiAsync() {   //获取电影xx的方法，自己创建的
  return fetch('https://facebook.github.io/react-native/movies.json')   //接口网站
    .then((response) => response.json())    //将请求到的数据转为json格式
    .then((responseJson) => {
      return responseJson.movies;   //请求成功返回数据
    })
    .catch((error) => {
      console.error(error);    //请求失败，输出错误
    });
}