react-native开发环境配置

https://reactnative.cn/docs/getting-started.html

//连接夜神模拟器
 adb connect 127.0.0.1:62001

//启动项目
react-native run-android

创建项目

npx react-native init AwesomeProject

ui框架

React Native Elements

基本语法

1-1 hello world

//要使用标签,第一步必须导入
import React, { Component } from 'react';
import { Text, View,Button} from 'react-native';
export default class App extends Component {
  render() {
    return (
        <View>
          <Text>Hello, world!</Text>
          <Button 
          color="#ff2d51"
          title="btn"/>
        </View>
    );
  }
}

1-2 Image

//网络图片
<Image source={{uri:"xxx"}}>
//Tips:图片相关的资源一定要夹样式width,height
//本地图片
<Image source={require('./assets/bg.jpg')}/>

1-3 样式

import React, { Component } from 'react';
import { Text, View,StyleSheet} from 'react-native';
export default class App extends Component {
  render() {
    return (
        <View style={styles.container}>
          //给多个style
          <Text style={[styles.txt,styles.bg]} >hello</Text>
        </View>
    );
  }
}
const styles = StyleSheet.create({
    container:{
      backgroundColor:"red",
      width:200,
      height:200
    },
    txt:{
      color:"blue"
    },
    bg:{
      backgroundColor:"#fff"
    }
})

1-4 Dimensions

import { Dimensions } from 'react-native';
const { width, height,scale} =Dimensions.get('window');

1-5 布局

//react-native中默认view就是flex布局
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
         <View style={styles.child}></View>
         <View style={styles.child}></View>
         <View style={styles.child}></View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    width:400,
    height:400,
    backgroundColor:"red",
    flexDirection:"row",
    justifyContent:"space-around",
    alignItems:"center"
  },
  child:{
    width:100,
    height:100,
    backgroundColor:"blue"
  }
})

1-6 调试

1.夜神模拟器
2.android studios
3.真机调试

1-7 transform

transform:[{translate:[-50,-50]}]
// transform:[{translateX:-50},{translateY:-50}]

事件

<Button
      title="btn"
       onPress={()=>{
       Alert.alert("good")
        }}
 ></Button>
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Button
          title="btn"
          onPress={this.handleClick}
        ></Button>
      </View>
    );
  }
  handleClick=()=>{
    Alert.alert("good")
  }
}

Http请求

componentDidMount() {
    // ctrl+shift+j
    var url = "http://192.168.14.15:5000/dj/program?rid=336355127"
    fetch(url).then(res => res.json()).then(resJson => {
      console.log(resJson.programs)
      this.setState({
        movies: resJson.programs
      })
    })
  }
//支持async await
async componentDidMount() {
    // ctrl+shift+j
    var url = "http://192.168.14.15:5000/dj/program?rid=336355127"
    var data = await fetch(url);
    var resJson = await data.json();
    console.log(resJson)
  }

安装插件

react native Snippet
rnc    ----快速生成react-native

路由

1-1、配置

链接

yarn add react-navigation
yarn add react-navigation-stack

yarn add react-native-reanimated react-native-gesture-handler react-native-screens

//在android/app/build.gradle 中 dependencies 选项中添加下面这两行:
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

在 src/main/java/com/native02/MainActivity.java 中加上
package com.reactnavigation.example;
import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
  @Override
  protected String getMainComponentName() {
    return "Example";
  }
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

//index.js
import 'react-native-gesture-handler'

1-2、拆分

routers
views

//routers/index.js
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomePage from '../views/HomePage';
const AppNavigator = createStackNavigator(
    {
      Home: {
        screen: HomePage
      },
    }, 
    {
    initialRouteName: "Home"
    }
  );
export default createAppContainer(AppNavigator);

//App.js
import React from 'react';
import AppNavigator from './routers'
export default class App extends React.Component {
  render() {
    return <AppNavigator/>
  }
}

1-3、配置导航条

1-3-1、在组件中配置

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };
}

1-3-2、在路由中配置

const AppNavigator = createStackNavigator(
    {
        Home: {
            screen: HomePage,
            navigationOptions: {
                headerTitle: "网易",
                headerStyle: {
                    backgroundColor: "#c20c0c"
                },
                headerTitleStyle: {
                    color: "#fff"
                }
            }
        },
    }
);

1-3-3、导航条的全局配置

const AppNavigator = createStackNavigator(
    ...
    {
        initialRouteName: "Home",
        //导航条的全局配置
        defaultNavigationOptions: {
            headerStyle: {
                backgroundColor: "#c20c0c"
            },
            headerTitleStyle: {
                color: "#fff"
            },
            headerTintColor:"#fff"
        }
    }
);

跳转

//配置Detail页面
const AppNavigator = createStackNavigator(
    {
        Home: {
            screen: HomePage,
        },
        Detail:{
            screen: DetailPage
        }
    }
);

//跳转
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Detail')}
 />

<Button
title="Go to Details"
onPress={this.toggleDetail}
/>
toggleDetail=()=>{
  this.props.navigation.navigate('Detail',{id:"86"})
}

从Welcome到Home

export default class WelcomePage extends Component {
  ...
  componentDidMount(){
      this.timer = setTimeout(()=>{
        this.props.navigation.navigate("Home")
      },3000)
  }
  componentWillUnmount(){
      if(this.timer){
          clearTimeout(this.timer)
      }
  }
}

传值

//传递页面
export default class HomePage extends Component {
    render() {
        return (
            <View>
                <Text> HomePage </Text>
                <Button
                    title="Go to Details"
                    onPress={this.toggleDetail}
                />
            </View>
        );
    }
    toggleDetail=()=>{
        this.props.navigation.navigate('Detail',{id:"1001"})
    }
}

//接收页面
componentDidMount(){
  let id = this.props.navigation.getParam("id");
  Alert.alert(id)
}