項(xiàng)目使用 rn 開發(fā)接近尾聲儒飒，將遇到的問題記錄一下舵盈，對(duì)應(yīng)一些實(shí)用場(chǎng)景论矾。
setState
一定要注意 setState 是異步的。
如果要在setState后進(jìn)行某些操作艘希，
this.setState({
data: []
},()=>{
// some function
})
在setState后硼身，并不會(huì)立即更新 UI。
this.setState({data1: 1})
this.setState({data2: 2})
this.setState({data3: 3})
等價(jià)于
this.setState({
data1: 1,
data2: 2,
data3: 3
})
項(xiàng)目結(jié)構(gòu)
使用 react-navigation(V2)覆享，
RootStack
----AdScene
----IntroScene
----RootTab
--------HomeStack
--------MyStack
--------SettingStack
----GestureLock
...
對(duì)應(yīng)代碼
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/>
}
}
定義全局導(dǎo)航
在 ChildComponent中可以使用 withNavigation，通過 this.props.navigation 來取得當(dāng)前 router营袜，為了更方便地跳轉(zhuǎn)撒顿，還是定義一個(gè)通用的路由方式比較好荚板。
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'})愉快地跳轉(zhuǎn)了吩屹。
開屏廣告頁的實(shí)現(xiàn)
基本思路：廣告頁設(shè)為應(yīng)用首屏，展示完廣告頁后煤搜，重設(shè) RootTab 為首屏
react-navigation v1版本跟 v2版本是有區(qū)別的唧席，下面是 v2 版重設(shè)方法
_dismiss(){
const fun = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'RootTab' })],
})
this.props.navigation.dispatch(fun)
}
啟動(dòng)應(yīng)用—讀取廣告頁緩存—如果圖片有緩存則顯示擦盾、沒有就直接進(jìn)入首頁。
最后實(shí)現(xiàn)起來還是有一點(diǎn) Bug淌哟，使用 AsyncStorage迹卢，由于讀取是異步的，如果不顯示廣告頁(圖片沒緩存或者接口控制不顯示)徒仓，還是會(huì)停留一小段時(shí)間腐碱。
手機(jī)號(hào)碼輸入格式化
<TextInput ref='textInput'
style={styles.field}
placeholder={'手機(jī)號(hào)'}
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控件默認(rèn)會(huì)有下劃線掉弛，使用 underlineColorAndroid={'transparent'}可去除症见；并且一定要設(shè)置value屬性，否則Android中殃饿，輸入文字后輸入框不會(huì)相應(yīng)改變谋作。
文字間距lineHeight
text: {
fontSize: 14,
lineHeight: 20,
width: '90%'
}
使用index
為了使用方便，可以在相似模塊目錄下定義 index壁晒，如下圖：
這樣就可以通過 import {Utils, CheckFlow} from './util使用方法
children屬性
component 默認(rèn)都有一個(gè)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>)
單例的實(shí)現(xiàn)
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 并行請(qǐng)求
開發(fā)中偶爾遇到需要請(qǐng)求多個(gè)接口攒钳，一起處理返回結(jié)果。
fetch api 是基于 promise 的不撑，可以很方便地實(shí)現(xiàn)這個(gè)需求
Promise.all([
fetch("api1"),
fetch("api2"),
fetch("api3")
]).then(([result1, result2, result3]) => {
// result
}).catch((err) => {
console.log(err);
});
一般會(huì)對(duì) fetch 進(jìn)行簡單的封裝澳泵，只要返回 promise 對(duì)象就好了击喂。
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 導(dǎo)航欄標(biāo)題居中
react-navigation(v2.2.0) 并沒有為 android 提供類似于 iOS 導(dǎo)航欄效果的選項(xiàng)没宾，需要修改源碼。
在 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
);
}
若要修改返回按鈕圖標(biāo)顽素，替換 back-iconxxx.android.png
