ReactNative

2020-04-20  本文已影响0人  一只小丫丫

安装

软件

cmd安装

nrm 管理 npm 下载源
npm install nrm -g
nrm use taobao

react-native-cli

native 脚手架
npm install react-native-cli -g

环境变量配置

ANDROID_HOME 安卓sdk所在对的目录
platform-tools 平台工具
C:\Users\28688\AppData\Local\Android\Sdk\platform-tools
java jdk/bin 目录
C:\Program Files\Java\jdk1.8.0_202\bin

初始化项目

npx react-native init myapp

添加安卓依赖包的源地址（阿里）

android/build.gradle
            allprojects {
    repositories {
        mavenLocal()
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' } 
        ....
}

连接模拟器

打开mumu模拟器
adb connect 127.0.0.1:7555

运行项目

npx react-native run-android

写一个最简单的Hello World

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

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

Props（属性）

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。
以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的 prop 来指定要显示的图片的地址，以及使用名为style的 prop 来控制其尺寸。

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

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

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

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

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center', marginTop: 50}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

State（状态）

我们使用两种数据来控制一个组件：props和state。

  1. props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。
  2. 对于需要改变的数据，我们需要使用state。
    一般来说，你需要在class中声明一个state对象，然后在需要修改时调用setState方法。
提示一些初学者应该牢记的要点：
  1. 一切界面变化都是状态state变化
  2. state的修改必须通过setState()方法
    this.state.likes = 100; // 这样的直接赋值修改无效！
    setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性
    setState 是异步操作，修改不会马上生效

处理文本输入

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

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

export default function PizzaTranslator() {
  const [text, setText] = useState('');
  return (
    <View>
      <Text>{this.state.msg}</Text>
      <TextInput 
        value={this.state.msg}
        onChangeText={text=>this.setState({msg:text})}
        style={{height:40,borderColor:'gray',borderWidth:1}}></TextInput>
     </View>
  );

处理触摸事件

移动应用上的用户交互基本靠“摸”。当然，“摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，或是在一个地图上缩放。React Native 提供了可以处理常见触摸手势（例如点击或滑动）的组件， 以及可用于识别更复杂的手势的完整的手势响应系统。

<Button 
  onPress={() => alert("在来一首")}
  title="桥边姑娘"
  color="#f30"
/>

点击这个按钮会调用"onPress"函数，具体作用就是显示一个 alert 弹出框。你还可以指定"color"属性来修改按钮的颜色。

使用滚动视图

ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView 不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。

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

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return (
        <ScrollView>
          <Text style={{fontSize:96}}>Scroll me plz</Text>
          <Text style={{fontSize:96}}>If you like</Text>
          <Text style={{fontSize:96}}>Scrolling down</Text>
          <Text style={{fontSize:96}}>What's the best</Text>
          <Text style={{fontSize:96}}>Framework around?</Text>
          <Text style={{fontSize:80}}>React Native</Text>
        </ScrollView>
    );
  }
}

ScrollView适合用来显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的FlatList组件。

使用长列表

FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。

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

FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。

import React,{Component}from 'react';
import {
  SafeAreaView,   // 安全区域 刘海屏
  StyleSheet,     // 样式表
  ScrollView,     // 视图滚动区域
  View,           // 视图内容
  Text,           // 文本标签
  Button,
  StatusBar,      // 状态栏
  Image,
  TouchableOpacity, //触摸半透明组件
  TextInput,
  FlatList,
} from 'react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { msg:"你好RN",movies:[]};
  }
  componentDidMount() {
    this.getMovies();
  }
  getMovies(){
    fetch(
      "http://www.endata.com.cn/API/GetData.ashx",
      {
      method:"post",
      body:'areaId=50&typeId=0&year=0&initial=&pageIndex=1&pageSize=10&MethodName=BoxOffice_GetMovieData_List',
      headers:{"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8"}
    })
    .then(res=>res.json())
    .then(res=>{
      console.log(res);
      this.setState({movies:res.Data.Table});
    })   
     
  }
  render() {
    return (
      <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <FlatList 
        keyExtractor={item=>item.ID}
        data={this.state.movies}
        numColumns={3}
        columnWrapperStyle={styles.row}
        renderItem={({item})=>{return(
          <View style={{marginTop:30}}>
            <Image style={{width:130,height:160}}
            source={{uri:item.defaultImage}} />
            <Text style={{marginTop:5}}>{item.MovieName}</Text>
          </View>
        )}}
        />
        {/* 1. 注释scrollView 里面的所有内容
        FlatList 做列表
        keyExtractor key 抽取
        data  数据指定
        numColumns  行的数量
        renderItem  列的渲染 */}
      </SafeAreaView>
    </>
    );
  }
}
// react Native css
// 没有百分比数值,不用单位默认是pt,默认flex弹性布局,布局方向默认垂直布局 
const styles = StyleSheet.create({
  row:{flexDirection:"row",justifyContent:"space-between"},
  col:{flex:1,height:180},
  big:{fontSize:48},
  orange:{color:"#F30"}
});

export default App;
效果图：
上一篇下一篇

猜你喜欢

热点阅读