23.react-native

Posted on

1.App开发模式介绍

Web App ： 用html+css+js写的网页程序

混合式App开发：（HybirdApp）就是使用前端已有的技术，HTML + CSS + JS ，然后再搭配一些相关的打包编译技术，就能够开发出一个手机App，安装到手机中进行使用。

原生(native app)App：使用IOS、Android 官方提供的工具、开发平台、配套语言进行手机App开发的方式

BP

BP

2.hybird开发技术选型

Vue.js 和 Weex

React.js 和 React-Native

Angular.js 和 Ionic

Html5+ ：把html+css+js开发web应用打包成apk

BP

3.安卓环境配置

1.安装java jdk

​ A) 修改环境变量，新增JAVA_HOME的系统环境变量，值为C:\Program Files (x86)\Java\jdk1.8.0_112，也就是安装JDK的根目录

B) 修改系统环境变量Path，在Path之后新增%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

C) 新建系统环境变量CLASSPATH，值为.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

D) 保存所有的系统环境变量，同时退出系统环境变量配置窗口，然后运行cmd命令行工具，输入javac，如果能出现javac的命令选项，就表示配置成功！

注意：在win10 的环境下可以将相对路径换成绝对路径

classpath：

BP

path：

BP

2.安装Node.js
3.安装Git环境
4.安装python2环境
5.将android压缩包解压之后放到c盘根目录

A) 在系统环境变量中新建ANDROID_HOME，值为android SDK Manager的安装路径C:\android

B) 紧接着，在Path中新增;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

注意：win10 如上图path的最后的写法

6.（非必须）模拟器

A) 将C:\android\platform-tools\adb.exe拷贝一份，重命名为nox_adb.exe，替换掉D:\Program Files\Nox\bin下的nox_adb.exe文件

B) 打开夜神模拟器

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

D) 查看安卓连接设备 adb devices

E) 配置夜神模拟器 375*667 dpi:163

7.安装yarn和react-native-cli

npm install -g yarn react-native-cli

设置下载源：

yarn config set registry https://registry.npm.taobao.org –global

yarn config set disturl https://npm.taobao.org/dist –global

8.react-native-init

通过react-native-init命令创建一个App (注意项目不要放在中文路径下)

9.react-native run-android

进入testRN目录，通过npx
react-native run-android命令来运行项目

10.问题

BP

A) 在android/app/src/main下新建assets文件夹

B) 在项目根目录下输入如下命令：

react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res

BP

C) 重新使用 react-native run-android 来启动项目

11.热更新解决端口被占用的问题

A) netstat -ano | findstr “8081”

B) tasklist|findstr “pid” 如果结果显示 java.exe，则说明8081端口被占用了

C) react-native run-android 把项目安装到夜神模拟器

D)关闭以下窗口，然后通过react-native start –port 9999 重新打开服务端口

BP

E) 打开夜神模拟器，打开app，摇一摇

BP

F) 打开夜神模拟器，摇一摇

BP

4.RN基础组件

View —>视图

Text —>文本

Image —>图片

TextInput —>文本输入框

ScrollView —>滚动视图

StyleSheet —>创建样式 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
// 1.首先在开头导入所需要的组件的名称
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
  TextInput
} from 'react-native';

// 2.在App中定义所有的函数和变量的值
const App: () => React$Node = () => {
  const [value, onChangeText] = React.useState('Useless Placeholder');

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

//3.在return中返回需要映射的组件
  return (
    <>
      <ScrollView>
          <Text>这是View</Text>
          <View style={styles.box}></View>
          <View style={{width:100,height:100,backgroundColor:'blue'}}></View>
          <Image source={pic} style={{ width: 193, height: 110 }} />
          <Image source={require('./images/1.png')}></Image>
          <TextInput
            style={{ height: 40, borderColor: 'red', borderWidth: 1 }}
            onChangeText={text => onChangeText(text)}
            value={value}
          />
      </ScrollView>
    </>
  );
};


const styles = StyleSheet.create({
  box:{
    width:300,
    height:200,
    borderColor:'yellow',
    borderWidth:2,
    borderStyle:"solid"
  }
});

export default App;

5.交互组件

Button —>按钮

Picker —>选择视图

Switch —>开关

Slider —>滑块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<Button
          onPress={onPressLearnMore}
          title="Learn More"
          color="#841584"
        />

        <Picker
          selectedValue={language}
          style={{ height: 50, width: 100 }}
          onValueChange={(itemValue, itemIndex) =>
            onChangeLanaguage(itemValue)
          }>
          <Picker.Item label="Java" value="java" />
          <Picker.Item label="JavaScript" value="js" />
        </Picker>

        <Slider maximumValue={100} minimumValue={0} onValueChange={(value) => console.log(value)} step={2} value={50}></Slider>

        <Switch value={switchStatus} onValueChange={(value) => { onChangeswitchStatus(value) }}></Switch>

const [switchStatus, onChangeswitchStatus] = React.useState(false);
const [language, onChangeLanaguage] = React.useState('');


 onPressLearnMore = () => {
    console.log("xxx")
 }

6. 列表组件

FlatList : 列表

Section ：分组列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<SectionList
        renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>}
        sections={[
          { title: 'Title1', data: ['item1', 'item2'], renderItem: overrideRenderItem },
          { title: 'Title2', data: ['item3', 'item4'], renderItem: overrideRenderItem2 },
          { title: 'Title3', data: ['item5', 'item6'] },
        ]}
      />

      <FlatList
        data={[{ key: 'a' }, { key: 'b' }, { key: 'a' }, { key: 'b' }]}
        renderItem={({ item }) => <Text>{item.key}</Text>}
        ItemSeparatorComponent={() => <View style={{ height: 1, width: '100%', backgroundColor: "red" }}></View>}
        ListHeaderComponent={() => <View><Text>列表头</Text></View>}
        ListFooterComponent={() => <View><Text>列表尾</Text></View>}
        numColumns={2}
        columnWrapperStyle={{ borderWidth: 1, borderColor: 'blue', paddingLeft: 20 }}  //指定每一行容器的样式(设置多列的情况下)
        getItemLayout={(data, index) => (
          { length: 100, offset: (100 + 2) * index, index }
        )}   //当行高固定的时候可以使用这个属性来优化性能
        refreshing={false}     //当前是否正在刷新
        onEndReachedThreshold={0}  //到距离底部0的时候触发onEndReached方法
        onEndReached={() => { console.log("拉到底部了") }}
      />


 const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text style={{ color: 'red' }} key={index}>Override1{item}</Text>
  const overrideRenderItem2 = ({ item, index, section: { title, data } }) => <Text style={{ color: 'blue' }} key={index}>Override2{item}</Text>

7.其他组件

ActivityIndicator —> 提示的Activity

Alert —>提示弹框

Modal —>模态页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<Button onPress={showModal} title="弹出Modal"></Button>
      <Button onPress={showAlert} title="弹出Alert"></Button>

      <Modal
        animationType='slide'           // 从底部滑入
        transparent={false}             // 不透明
        visible={showmodal}    // 根据isModal决定是否显示
        onRequestClose={() => { console.log("onRequestClose") }}  // android必须实现
      >
        <View style={styles.modalViewStyle}>
          {/* 关闭页面 */}
          <TouchableOpacity
            onPress={() => {
              onChangeShowmodal(false)
            }}
          >
            <Text>关闭页面</Text>
          </TouchableOpacity>
        </View>
      </Modal>

      <ActivityIndicator animating={true} color="blue"></ActivityIndicator>


showAlert = () => {
    Alert.alert(
      'Alert Title',
      'My Alert Msg',
      [
        { text: 'Ask me later', onPress: () => console.log('Ask me later pressed') },
        { text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
        { text: 'OK', onPress: () => console.log('OK Pressed') },
      ],
      { cancelable: false }
    )
  }

  showModal = () => {
    onChangeShowmodal(true)
  }
  
 const [showModal1,onChangeShowmodal] = React.useState(false)

Animated的使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const [fadeInOpacity, onChangeFadeInOpacity] = React.useState(new Animated.Value(0))
  React.useEffect(() => {
    Animated.timing(fadeInOpacity, {
      toValue: 1, // 目标值
      duration: 2500, // 动画时间
    }).start();
  }, [])

 <Animated.View                       // 使用专门的可动画化的View组件
        style={{
          opacity: fadeInOpacity          // 将透明度指定为动画变量值
        }}
      >
        <Text>测试透明度动画</Text>
      </Animated.View>