项目使用 rn 开发接近尾声，将遇到的问题记录一下，对应一些实用场景。
setState
一定要注意 setState 是异步的。
如果要在setState后进行某些操作，
this.setState({
data: []
},()=>{
// some function
})
在setState后，并不会立即更新 UI。
this.setState({data1: 1})
this.setState({data2: 2})
this.setState({data3: 3})
等价于
this.setState({
data1: 1,
data2: 2,
data3: 3
})
项目结构
使用 react-navigation(V2)，
RootStack
----AdScene
----IntroScene
----RootTab
--------HomeStack
--------MyStack
--------SettingStack
----GestureLock
...
对应代码
const Scene = {
WebView: WebView,
MomentScene: MomentScene,
QrCodeScene: QrCodeScene
}
const HomeStack = createStackNavigator({
Home: Home,
...Scene,
});
const MyStack = createStackNavigator({
MyScene: MyScene,
...Scene
});
const SettingStack = createStackNavigator({
SettingStack: SettingStack,
...Scene
});
const RootTab = createBottomTabNavigator({
Home: HomeStack,
MyScene: MyStack,
Setting: SettingStack,
});
const RootNav = createStackNavigator({
AdScene: AdScene,
RootTab: RootTab,
Login: Login,
Intro: Intro,
GestureLock: GestureLock,
}, {
headerMode: 'none',
mode: 'modal'
});
export default class App extends Component {
render() {
return <RootNav/>
}
}
定义全局导航
在 ChildComponent中可以使用 withNavigation，通过 this.props.navigation 来取得当前 router，为了更方便地跳转，还是定义一个通用的路由方式比较好。
NavigationService.js
import { NavigationActions } from 'react-navigation';
const config = {};
export function setNavigator(nav) {
if (nav) {
config.navigator = nav;
}
}
export function navigate(routeName, params) {
if (config.navigator && routeName) {
const action = NavigationActions.navigate({ routeName: routeName, params: params });
config.navigator.dispatch(action);
}
}
export function goBack() {
if (config.navigator) {
const action = NavigationActions.back({});
config.navigator.dispatch(action);
}
}
App.js 中
import {setNavigator} from './NavigationService'
export default class App extends Component {
componentDidMount() {
setNavigator(this.navigator);
}
render() {
return <RootNav ref={nav => { setNavigator(nav); }}/>
}
}
定义通用方法
import {navigate} from './NavigationService'
class Utils {
static navigateTo(scene, params){
navigate(scene, params)
}
}
然后就可以使用 Utils.navigateTo('WebView', {url: 'https://www.github.com'})愉快地跳转了。
开屏广告页的实现
基本思路：广告页设为应用首屏，展示完广告页后，重设 RootTab 为首屏
react-navigation v1版本跟 v2版本是有区别的，下面是 v2 版重设方法
_dismiss(){
const fun = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'RootTab' })],
})
this.props.navigation.dispatch(fun)
}
启动应用—读取广告页缓存—如果图片有缓存则显示、没有就直接进入首页。
最后实现起来还是有一点 Bug，使用 AsyncStorage，由于读取是异步的，如果不显示广告页(图片没缓存或者接口控制不显示)，还是会停留一小段时间。
手机号码输入格式化
<TextInput ref='textInput'
style={styles.field}
placeholder={'手机号'}
keyboardType='phone-pad'
value={this.state.mobile}
maxLength={13}
underlineColorAndroid={'transparent'}
onChangeText={(text)=>{
if(text.length == 3 && this.state.mobile.length == 2){
text += ' '
}else if(text.length == 3 && this.state.mobile.length == 4){
text = text.substring(0 , text.length-1)
} else if(text.length == 8 && this.state.mobile.length == 7){
text += ' '
}else if(text.length == 8 && this.state.mobile.length == 9){
text = text.substring(0 , text.length-1)
}
this.setState({mobile: text})
}}
/>
注意，在Android中TextInput控件默认会有下划线，使用 underlineColorAndroid={'transparent'}可去除；并且一定要设置value属性，否则Android中，输入文字后输入框不会相应改变。
文字间距lineHeight
text: {
fontSize: 14,
lineHeight: 20,
width: '90%'
}
使用index
为了使用方便，可以在相似模块目录下定义 index，如下图：
index.png
这样就可以通过 import {Utils, CheckFlow} from './util使用方法
children属性
component 默认都有一个children属性
children: PropTypes.oneOfType([
PropTypes.string,
PropTypes.node,
PropTypes.element
])
<CustomeComponent>some</CustomeComponent>
export default class CustomeComponent extends Component {
render() {
var text = this.props.children // some
return (
<View/>
)
}
}
条件渲染 renderIf
import renderIf from 'render-if'
return (<View style={styles.container}>
{renderIf(this.state.shouldRender)(
<Text style={{paddingTop: 10, color: 'red'}}>example</Text>
)}
</View>)
单例的实现
export default class UserManager{
static shared = null;
_userInfo = null
static getInstance() {
if (UserManager.shared == null) {
UserManager.shared = new UserManager();
}
return UserManager.shared;
}
getUserInfo() {
if (this._userInfo){
} else {
Storage.getInstance().getObject(Constants.userInfokey).then((data)=>{
this._userInfo = data
})
}
return this._userInfo;
}
setUserInfo(key) {
this._userInfo = key;
Storage.getInstance().saveObject(Constants.userInfokey, key).then(()=>{
console.log('save userInfokey success')
});
}
}
UserManager.getInstance().getUserInfo()
Fetch 并行请求
开发中偶尔遇到需要请求多个接口，一起处理返回结果。
fetch api 是基于 promise 的，可以很方便地实现这个需求
Promise.all([
fetch("api1"),
fetch("api2"),
fetch("api3")
]).then(([result1, result2, result3]) => {
// result
}).catch((err) => {
console.log(err);
});
一般会对 fetch 进行简单的封装，只要返回 promise 对象就好了。
export default class FetchUtils {
static post(url, data={}) {
let request = this._generateRequest(url, data)
return new Promise((success, error)=> {fetch(request).then((response) => response.json())
.then((jsonData) => {
success(jsonData)
})});
}
}
Promise.all([
FetchUtils.post("api1"),
FetchUtils.post("api2"),
FetchUtils.post("api3")
]).then(([result1, result2, result3]) => {
// result
}).catch((err) => {
console.log(err);
});
react-navigation android 导航栏标题居中
react-navigation(v2.2.0) 并没有为 android 提供类似于 iOS 导航栏效果的选项，需要修改源码。
在 react-navigation 目录下 找到 Header.js-> _renderTitle()
_renderTitle(props, options) {
const style = {};
const { transitionPreset } = this.props;
if (Platform.OS === 'android') {
// if (!options.hasLeftComponent) {
// style.left = 0;
// }
// if (!options.hasRightComponent) {
// style.right = 0;
// }
if ( !options.hasLeftComponent &&
!options.hasRightComponent
) {
style.left = 0;
style.right = 0;
}
style.justifyContent = 'center';
} else if (
Platform.OS === 'ios' &&
!options.hasLeftComponent &&
!options.hasRightComponent
) {
style.left = 0;
style.right = 0;
}
return this._renderSubView(
{ ...props, style },
'title',
this._renderTitleComponent,
transitionPreset === 'uikit'
? this.props.titleFromLeftInterpolator
: this.props.titleInterpolator
);
}
若要修改返回按钮图标，替换 back-iconxxx.android.png
网友评论