react-native为本地js和开源库的js编写.d.ts声明⽂件
读书不觉已春深！明⽇清明节
在使⽤Typescript编写程序RN过程中遇到困扰，且不论react，不论在浏览器中，只论写react-native的APP，怎么使⽤ declare声明⽂件和 namespace命名空间编写满意的程序。
因不能在⽹上到合适的资源，以⾄于写该博客准备了久久近2周。
在编写Typescript语⾔下的react-native时，抛出 3 个问题
1，rn 中怎么使⽤第三⽅Javascript开源库 ？
2，rn 中怎么使⽤ global全局变量 ？
3，rn 中怎么使⽤⾃⼰本地编写的Javascript ？
react-native 中安装并使⽤Javascript开源库
安装该UI库 react-native-ui-lib，需要安装相应的上述依赖
npm i react-native-ui-lib
@react-native-community/blur
@react-native-community/netinfo
@react-native-community/datetimepicker
react-native-reanimated
安装成功之后，在⽂档中会看到只能使⽤在Javascript语⾔的react-native中。能使⽤在Typescript语⾔中， 有为该开源库编写**.d.ts声明⽂件。然后使⽤时会报不到No overload matches this call.但是由于该开源库已经具有声明⽂件，所以时可以使⽤的。
为换⼀种⽅式使⽤，以⽅便描述怎么在本地编写声明⽂件。我在本地为组件重新编写了声明组件，详情解析请
接下来要使⽤ react-native-ui-lib 就需要为其⼿动编写声明⽂件了。⽹络上有很多关于Jquery的声明⽂件编写。但不是应⽤在react-native 中，且⽆法贴切表达rn中应如何的编写与使⽤声明⽂件，毕竟环境不同，毕竟本⼈不太专业Web端 。故此，研究了好久终有所突破并于此分享出来~
按照⽂档编写下⽅js⽂件
// */libs/components/FoundationConfig.js (第⼀步)
import{Colors, Typography, Spacings}from'react-native-ui-lib';
Colors.loadColors({
primaryColor:'#2364AA',
secondaryColor:'#81C3D7',
textColor:'##221D23',
errorColor:'#E63B2E',
successColor:'#ADC76F',
warnColor:'##FF963C'
});
Typography.loadTypographies({
heading:{fontSize:36, fontWeight:'600'},
subheading:{fontSize:28, fontWeight:'500'},
body:{fontSize:18, fontWeight:'400'},
});
Spacings.loadSpacings({
page:20,
card:12,
gridGutter:16
});
// */libs/components/ComponentsConfig.js (第⼆步)
import{ThemeManager}from'react-native-ui-lib';
// with plain object
ThemeManager.setComponentTheme('Card',{
borderRadius:8
});
// with a dynamic function
ThemeManager.setComponentTheme('Button',(props, context)=>{
// 'square' is not an original Button prop, but a custom prop that can
// be used to create different variations of buttons in your app
if(props.square){
return{
borderRadius:0
};
}
});
// */libs/components/MyScreen.js (第三步)
import React,{Component}from'react';
import{View, Text, Card, Button}from'react-native-ui-lib';
class MyScreen extends Component {
render(){
return(
<View flex padding-page>
<Text heading marginB-s4>My Screen</Text>
<Card height={100} center padding-card marginB-s4>
<Text body>This is an example card </Text>
</Card>
<Button label="Button" body bg-primaryColor square></Button>
</View>
);
}
}
export default MyScreen;
使⽤重点，编写以下 声明⽂件
/
/ */libs/components/MyScreen.d.js (第四步：创建声明⽂件提供 *.tsx 使⽤) import React,{Component}from'react';
declare class MyScreen extends Component {}
export default MyScreen;
在react-native中的*.tsx⽂件中，使⽤已声明过的Javascript⽂件
//第五步 *.tsx ⽂件中使⽤Javascript程序
// */screens/OnlineContact.tsx
import React from'react';
import{
StyleSheet,
View,
Text,
Image,
}from'react-native';
import{ TouchableOpacity }from'react-native-gesture-handler';
import DeviceConfs from'../confs/DeviceConfs';
import ImgConfs from'../../src/confs/ImgConfs';
import StringChecker from'../libs/js-module/jsmodule';
import MyScreen from'../libs/components/MyScreen';
interface OnlineContactProps {
id: string;
schecker: StringChecker;
}
interface OnlineContactState {
tabIndex: number;
}
export default class OnlineContact extends React.Component<OnlineContactProps, OnlineContactState>{
schecker =new StringChecker();
constructor(props: OnlineContactProps){
super(props);
this.state ={
tabIndex:0
}
}
render(){
return<View style={{flex:1, alignItems:'center', backgroundColor:'white'}}>
{/* 标题栏 */}
<View style={{width: DeviceConfs.sWidth, height:42,
flexDirection:'row', alignItems:'center', justifyContent:'space-between'}}>
<TouchableOpacity onPress={()=>{this.props.navigation.pop()}} activeOpacity ={0.8}
style={{flexDirection:'row', alignItems:'center', width:DeviceConfs.sWidth *0.3}}>
<Image source={ImgConfs.ic_goback} resizeMode={'contain'}
style={{width:38, height:38}}/>
<Text style={{color:'#444', fontWeight:'bold', fontSize:14, alignSelf:'center', marginLeft:-6}}>{'返回'}</Text> </TouchableOpacity>
<View style={{width:DeviceConfs.sWidth *0.3, alignItems:'center', justifyContent:'center'}}>
<Text style={{color:'#333', fontWeight:'bold', fontSize:18}}>{'TS功能测试'}</Text>
</View>
<View style={{width:DeviceConfs.sWidth *0.3}}/>
</View>
<View style={{height:4, width: DeviceConfs.sWidth, backgroundColor:'#f4f4f4'}}/>
{/* 写⼊测试的代码 */}
{/* ⾃定义声明⽂件使⽤第三⽅库的js */}
<View style={{width:DeviceConfs.sWidth, height: DeviceConfs.sHeight ,
padding:30,justifyContent:'center'}}>
<MyScreen />
</View>
</View>
}
}
效果展⽰
react-native 中使⽤ global全局变量
Javascript中的RN有使⽤ global全局变量的⽅式，当然Typescript的RN也有⾃⼰使⽤global全局变量的⽅式 。
Typescript语⾔下的全局配置，则需要通过编写声明⽂件*.d.ts使⽤到全局变量的扩展⽅式。⽐如⼀下扩展全局变量⼿机尺⼨，宽和⾼。// */types/index.d.ts
// Prop Types
export{};
declare global {
var gHeight: string | number;
var gWidth: string | number;
}
export {}; 此⾏代码必不可少，使当前全局声明成为module声明。
声明⽂件书写完毕之后，声明⽂件中是不允许具体实现的。所以需要对在新声明的全局变量在APP起始页进⾏赋值。
// */AppContainer.tsx (APP起始页.tsx的组件容器)
const sWidth = ('window').width;
const sHeight = ('window').height;
class AppContainer extends React.Component<AppProps>{
constructor(props: AppProps){
super(props);
//配置全局变量-初始化
gHeight = sHeight;
gWidth = sWidth;
}
......
应⽤到页⾯中，⽐如 .tsx 测试页⾯
// */screens/OnlineContact.tsx
import React from'react';
import{
View,
Text,
Image,
}from'react-native';
import{ TouchableOpacity }from'react-native-gesture-handler';
import DeviceConfs from'../confs/DeviceConfs';
import ImgConfs from'../../src/confs/ImgConfs';
import StringChecker from'../libs/js-module/jsmodule';
interface OnlineContactProps {
id: string;
schecker: StringChecker;
}
interface OnlineContactState {
tabIndex: number;
}
export default class OnlineContact extends React.Component<OnlineContactProps, OnlineContactState>{
schecker =new StringChecker();
constructor(props: OnlineContactProps){
super(props);
this.state ={
tabIndex:0
}
}
render(){
return<View style={{flex:1, alignItems:'center', backgroundColor:'white'}}>
{/* 标题栏 */}
<View style={{width: DeviceConfs.sWidth, height:42,
flexDirection:'row', alignItems:'center', justifyContent:'space-between'}}>
<TouchableOpacity onPress={()=>{this.props.navigation.pop()}} activeOpacity ={0.8}
style={{flexDirection:'row', alignItems:'center', width:DeviceConfs.sWidth *0.3}}>
<Image source={ImgConfs.ic_goback} resizeMode={'contain'}
style={{width:38, height:38}}/>
<Text style={{color:'#444', fontWeight:'bold', fontSize:14, alignSelf:'center', marginLeft:-6}}>{'返回'}</Text> </TouchableOpacity>
<View style={{width:DeviceConfs.sWidth *0.3, alignItems:'center', justifyContent:'center'}}>
<Text style={{color:'#333', fontWeight:'bold', fontSize:18}}>{'TS功能测试'}</Text>
</View>
<View style={{width:DeviceConfs.sWidth *0.3}}/>
</View>
<View style={{height:4, width: DeviceConfs.sWidth, backgroundColor:'#f4f4f4'}}/>
{/* 写⼊测试的代码 */}
{/* ⾃定义声明⽂件扩展全局变量 */}
<View style={{width:DeviceConfs.sWidth, height: DeviceConfs.sHeight ,
reactnative原生列表padding:30,alignItems:'center'}}>
<Text style={{fontSize:16, color:'red', alignSelf:'flex-start'}}>
{'⾃写声明⽂件扩展全局变量:'}{'\n'}{'⼿机⾼度：'}{gHeight}{'\n⼿机宽度：'}{gWidth}
</Text>
</View>
</View>
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论