1 頁面跳轉(zhuǎn)
this.props.navigator.push({
title:"Detail",
component:?CommentList,
passProps:?{data:?data}
});
const?{?navigator?}?=this.props;
//或者寫成?const?navigator?=?this.props.navigator;
//為什么這里可以取得?props.navigator?請(qǐng)看上文:
//
//這里傳遞了navigator作為props
if(navigator)?{
navigator.push({
name:'Resume',
component:?Resume,
//?傳遞參數(shù)到跳轉(zhuǎn)的界面
params:?{
title:?title
}
})
}
2 返回按鈕操作
{this.props.title}
_pressButton(){
const?{?navigator?}?=this.props;
if(navigator)?{
navigator.pop();
}
}
3 參數(shù)傳遞（方法之間、父組件和子組件之間）
搜索
{
this.state.show?
dataSource={this.state.dataSource}
renderRow={this._renderRow}
/>
:Util.loading
}
//渲染圖書列表項(xiàng)
_renderRow:function(row){
return(
);
},
module.exports?=?React.createClass({
render:function(){
varrow?=this.props.row;
return(
{row.title}
{row.publisher}
{row.author}
{row.price}
{row.pages}頁
);
}
});
4 判斷IOS和Android
if(Platform.OS?==='ios')?{
this.props.navigator.push({
title:?discover.title,
component:?DiscoverContent,
passProps:?{discover},
});
}
else
{
//?Android
}
5 Tab切換IOS
title="圖書"
selected={this.state.selectedTab?==='圖書'}
icon={require('image!book')}
onPress={()?=>?{
this.setState({
selectedTab:'圖書'
});
}}>
title="電影"
selected={this.state.selectedTab?==='電影'}
icon={require('image!movie')}
onPress={()?=>?{
this.setState({
selectedTab:'電影'
});
}}>
title="音樂"
selected={this.state.selectedTab?==='音樂'}
icon={require('image!music')}
onPress={()?=>?{
this.setState({
selectedTab:'音樂'
});
}}>
WebView 使用方法
automaticallyAdjustContentInsets={false}
source={{uri:'http://weixinf1.quarkfinance.com/activity/invite/index'}}
scalesPageToFit={false}
/>
Linking 用法：
importReact,{
Linking
}from'react-native';
export?functionlink(url)?{
Linking.canOpenURL(url).then(supported=>?{
if(supported)?{
returnLinking.openURL(url)
}
})
.catch(err=>?{
console.error('An?error?occurred',?err);
})
}
鍵盤 事件
this.keyboardWillShowEvent=?DeviceEventEmitter.addListener('keyboardWillShow',this.keyboardWillShow.bind(this));
this.keyboardWillHideEvent=?DeviceEventEmitter.addListener('keyboardWillHide',this.keyboardWillHide.bind(this));
keyboardWillShow(e){
this.commentView&&this.commentView.setNativeProps({
style:?{
height:commentHeight-?e.endCoordinates.height
}
})
}
keyboardWillHide(){
this.commentView&&this.commentView.setNativeProps({
style:?{
height:commentHeight
}
})
}
componentUnMount(){
this.keyboardWillHideEvent.remove()
this.keyboardWillShowEvent.remove()
}
_onScroll(e)?{
const{actions,Acticle}?=this.props;
letscrollH=?e.nativeEvent.contentSize.height;//scrollview的高度
lety=?e.nativeEvent.contentOffset.y;//當(dāng)前滑動(dòng)顯示的y軸坐標(biāo)
letheight=?e.nativeEvent.layoutMeasurement.height;//顯示部分高度
if(scrollH-y
//?this._loadmore();
}
}
(3)alignSelf:對(duì)齊方式
alignSelf的對(duì)齊方式主要有四種：flex-start、?flex-end、?center、? auto、?stretch。
varReact=require('Dimensions');
console.log(Dimensions.get("window"));
//結(jié)果：{width:?375,?scale:?2,?height:?667}
翻轉(zhuǎn) 樣式
transform:?[{rotate:'50deg'}],
換行
{`\n`}
轉(zhuǎn)移字符
{`<`}
隔行換色
獲取屏幕尺寸以及最小線寬
varwidth=?Dimensions.get('window').width,
height=?Dimensions.get('window').height;
varuntil=?{
/*最小線寬*/
pixel:1/?PixelRatio.get(),
/*屏幕尺寸*/
size:?{
width:width,
height:height
},
/**
*?基于fetch的get方法
*@methodpost
*@param{string}?url
*@param{function}?callback?請(qǐng)求成功回調(diào)
*/
get:function(url,?successCallback,?failCallback){
fetch(url)
.then((response)?=>?response.text())
.then((responseText)?=>?{
successCallback(JSON.parse(responseText));
})
.catch(function(err){
failCallback(err);
});
}
};
Brendas-MacBook-Pro:appx_android?brendalogy$?./gradlew?compileDebug?--stacktrace
-bash:?./gradlew:?Permission?denied
chmod?+x?gradlew
______________________________________________
$?gradle
FAILURE:?Build?failed?with?an?exception.
*?What?went?wrong:
A?problem?occurred?configuring?project?':app'.
>?failed?to?find?Build?Tools?revision?24.4.1
圖片自適應(yīng)
react?native?中，圖片必須明確寫明大小值，不然無法顯示，同時(shí)width?:?'100%'',這種寫法不支持。
如果需要自適應(yīng)，有幾種做法：
只寫高度值，不寫寬度值，外層容器使用flex來做好布局，再配合resizeMode實(shí)現(xiàn)圖片自適應(yīng)即可。
例子1?:
例子2?:
flex:?1,
alignItems:?'stretch',
}}>
使用Dimensions來獲取設(shè)備viewport的寬高
var?Dimensions?=?require('Dimensions');
var?{?width,?height?}?=?Dimensions.get('window');
var?image?=?(
);
PixelRatio.getPixelSizeForLayoutSize(80)
RN 注釋
不能直接使用 //或者 ?/**/
可以使用：{/* 這是注釋 */ }
漸變效果
start={[0.0,0.0]}
end={[1.0,1.0]}
locations={[0,1]}
colors={['#ff8347','#f75a0e']}
style={styles.linearGradient}>
Sign?in?with?Facebook
