Fork me on GitHub

React Native 相关

环境搭建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 初始化项目 xxx(项目名)
react-native init xxx

cd 到项目 root 目录
// 运行 iOS
react-native run-ios
// 运行 Android
react-native run-android

// 安装库
cd 到项目 root 目录
yarn add react-native-gesture-handler
// 或者
npm install —save react-native-gesture-handler

// 把指定库和react-native链接起来
// 一般不用
react-native link react-native-gesture-handler

调试

模拟器上 Command + D 调出调试工具

1
2
3
4
5
6
Reload 重新加载js
Debug JS Remotely Debug模式 会打开一个浏览器来调试
Enable Live Reload 是否修改了实时加载(重新run 到首页去了)
Start Systrace
Enable Hot Reloading 热加载当前的页面(只更新当前显示的页面,不会到 首页去)
... 其他

vscode 的一些快捷键

1
2
3
Windows Shift + Alt + F
Ubuntu Ctrl + Shift + I
Mac Shift + Option + F

真机调试

1
2
3
4
5
6
7
使用 Xcode 打开项目,修改 RCTWebSocketExecutor.m 文件下的 @"localhost" 为IP地址,手机和电脑在同一个路由器下。

- (void)setUp
{
if (!_url) {
NSInteger port = [[[_bridge bundleURL] port] integerValue] ?: RCT_METRO_PORT;
NSString *host = [[_bridge bundleURL] host] ?: @"10.1.160.82";

Chrome 调试工具

项目结构

  • 应用启动是到 index.js 文件
  • 在参考使用下面的代码到指定的界面

启动过程

1
2
3
4
5
6
7
8
9
10
11
12

// 导入 React React 当然是必须的
import React, {Component} from 'react';

// 导入 AppRegistry AppRegistry 里有 registerComponent 函数
import {AppRegistry} from 'react-native';

// 这个是自己写的内容 setup 来自 ./js/main 路径 和小程序差不多
import setup from './js/main'

// 使用 AppRegistry 调用 registerComponent 函数 ,传的参数是 'AwesomeProject1' 和 setup
AppRegistry.registerComponent('AwesomeProject1', () => setup)
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

// 导入 React
import React, {Fragment} from 'react';

// 导入 SafeAreaView ...
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';

import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

// 这里是导入一个组件
// import HelloComponent from './HelloComponent'

import { Function } from 'core-js';

// 定义一个常量 这里是组件 html
const App = () => {
return (
<Fragment>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<View>
<Text style={styles.HelloComponent1} onPress={this.onPressButton}>aaaaaa</Text>
</View>
</SafeAreaView>
</Fragment>
);
};

// 函数
function onPressButton() {
console.log("sssssss");
}

// 定义一个常量 是 css 样式
const styles = StyleSheet.create({
HelloComponent1: {
fontSize:60,
backgroundColor: 'red',
marginTop:100
},
});

// 导出的内容
export default App;

绑定事件

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
const App = () => {

// 这里定义一个函数
this.onPressButton0 = {
onStartShouldSetResponder: () => true,
onMoveShouldSetResponder: () => true,

// 这里是响应结束时 触发
onResponderEnd:() => {
console.log('main.js Text tap')
},
};

return (
<Fragment>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<View>
<HelloComponent></HelloComponent>
// 绑定一个事件
<Text {...this.onPressButton0}>text</Text>
</View>
</SafeAreaView>
</Fragment>
);
};
export default App;

组件内绑定事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default class HelloComponent extends Component {
// 定义一个函数
onPressButton0 = {
onStartShouldSetResponder: () => true,
onMoveShouldSetResponder: () => true,
// 响应结束
onResponderEnd:() => {
console.log('HelloComponent1 组件内响应 onPressButton0')
},
};

render(){
return <View>
<Text style={styles.HelloComponent1} {...this.onPressButton0} >HelloComponent1 组件内响应 onPressButton0</Text>
</View>
}
}

组件数据绑定

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
// 全局的变量
var cc = 'sss'

export default class OneComponent extends Component {

组件的属性变量
state = {
name: '梁大红',
};

组件的属性变量
onPressButton0 = {
onStartShouldSetResponder: () => true,
onMoveShouldSetResponder: () => true,
onResponderEnd:() => {
console.log('OneComponent 组件内响应 onPressButton0')
// 刷新界面
this.setState({
name: this.state.name + '1'
})
// 修改全局值 来刷新界面
cc = cc + '1'
},
};

render(){
return <View>
// 取出值
<Text style={styles.HelloComponent1} {...this.onPressButton0} >{this.state.name}</Text>
<Text>{cc}</Text>
</View>
}
}
});

组件的生命周期

1
2
3
4
5
export default class OneComponent extends Component {
componentDidMount(){
console.log('在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。')
}
});

网络请求

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
export default class OneComponent extends Component {

componentDidMount() {

fetch('https://facebook.github.io/react-native/movies.json',
{
method: 'GET',

headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},

// body: JSON.stringify({
// // firstParam: 'yourValue',
// // secondParam: 'yourOtherValue',
// }),
},)

// json 处理
.then((response) => response.json())

// 成功了
.then((responseJson) => {
console.log('成功了' + responseJson);
})

// 异常处理
.catch((error) => {
console.log('失败了' + error);
});
}
});

Lib

- END -
扫一扫上面的二维码图案,加我微信

文章作者:梁大红

特别声明:若无特殊声明均为原创,转载请注明,侵权请联系

版权声明:署名-非商业性使用-禁止演绎 4.0 国际