使用TypeScript创建React Native

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

⒈初始化 React Native环境

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

⒉安装React Native官方的脚手架工具

npm install -g @react-native-community/cli

⒊使用React Native脚手架初始化项目

#默认是JavaScript
npx react-native init ts_react_native
#可以直接使用TypeScript初始化
npx react-native init ts_react_native --template react-native-template-typescript

⒋安装watchman

watchman用于监控React Native项目中文件的变动，经常有开发者忘记安装watchman而导致项目无法启动的情况

cd ts_react_native
y watchman

⒌更改项目为TypeScript环境

1.将TypeScript以及React Native和Jest的类型添加到您的项目中。

yarn add typescript @types/jest @types/react @types/react-native @types/react-test-renderer
# or for npm
npm install --save-dev @types/jest @types/react @types/react-native @types/react-test-renderer

⒉在项目的根目录中创建TypeScript配置文件tsconfig.json：

{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es6"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext"
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}

3.创建一个jest.config.js文件来配置Jest以使用TypeScript

module.exports = {
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

4.重命名一个JavaScript文件为 *.tsx

5.运行yarn tsc以检查新的TypeScript文件。

6.启动项目

#启动ios
cd ts_react_native && npx react-native run-ios
#启动Android
cd ts_react_native && npx react-native run-android

⒍设计架构

React Native的项目架构如图所示

这与React App的常规架构几乎一摸一样，只是使用React Navigation作为路由库。

我们必须充分利用代码复用的优势。在React Native中，我们同样需要使用Redux对状态进行全局管理。这样的结构是为了React生态能够简单地移植。

⒎React Navigation

React Navigation是React Native上的一个路由解决方案，它在进行设计的时候，很多函数都是以高阶函数的方式实现的，所以使用时会有很多不太直观的地方。

yarn add react-navigation @types/react-navigation

将之前的index.tsx改名为List.tsx，因为后面需要实现列表页，然后再新建一个index.tsx

import React from 'react';
import {StackNavigator} from 'react-navigation';
import List from './List';const StackRouter = StackNavigator({
List:{
screen:List
}
},{
initialRouteName: 'List',
})const Router = () => (<StackRouter />)expect default Router

路由就算集成完毕了。

⒏Redux

添加依赖后，修改相关代码。1.需要移除react-router相关代码，2要修改在开发环境下连接Redux开发工具的函数。

src/store/index.ts

import {applyMiddleware, combineReducers, createStore} from 'redux';
import {composeWithDevTools} from 'redux-devtools-extension';
import {persistReducer,persistStore,PersistConfig} from 'redux-persist';
import storage from 'redux-persist/es/storage';
import thunk from 'redux-thunk';
import reducers from '../reducer';const middleware = [thunk];const rootReducer = combineReducers({
...reducers,
})const persistConfig: PersistConfig = {
key: 'root',
storage,
whitelist: ['draft'],
}const persistedReducer: typeof rootReducer = persistedReducer(PersistConfig,rootReducer);const store = createStore(
persistedReducer,
__DEV__? composeWithDevTools(applyMiddleware(...middleware)) : applyMiddleware(...middleware),
)const persistor = persistStore(store);export{
store,
persistor,
}

src/index.tsx

import React from 'react';
import {StackNavigator} from 'react-navigation';
import List from './List';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';
import {persistor,store} from './store';const StackRouter = StackNavigator({
List:{
screen:List
}
},{
initialRouteName: 'List',
})const Router = () => (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<StackRouter />
</PersistGate>
</Provider>
)expect default Router

这样，我们就能最大限度地复用React App中的代码了。

*可以使用react-native-debugger进行调试

⒐列表页

实现列表页需要连接Redux然后获取数据，这里我们先用Text组件来循环渲染

这个地方需要注意，要全局修改网路请求的地址到localhost:3001，因为App上没有跨域的限制，可以直接访问。

所以我们先发一波网络请求。

src/List.tsx

import React, { Component } from 'react';
import {Platform,StyleSheet,Text,View,TouchableOpacity} from 'react-native';
import {fetchList} from './action';
import {connect} from 'react-redux';const mapStateToProps = (storeState,IStoreState) => ({
list: storeState.list,
})type IStateProps = ReturnType<typeof mapStateToProps>const mapDispatchToProps = {
fetchList,
}type IDispatchProps = typeof mapDispatchToPropstype IProps = IStateProps & IDispatchPropsclass App extends Component<IProps> {
componentDidMount(){
this.props.fetchList()
} render(){
console.log(this.props.list)
return(
<View style={styles.container}> </View>
)
}
}export default connect<IStateProps,IDispatchProps>(mapStateToProps,mapDispatchToProps)(App)const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:"center",
alignItems:"center",
backgroundColor:'#F5FCFF',
},v
});