1 页面跳转
this.props.navigator.push({
title:"Detail",
component: CommentList,
passProps: {data: data}
});
const { navigator } =this.props;
//或者写成 const navigator = this.props.navigator;
//为什么这里可以取得 props.navigator?请看上文:
//
//这里传递了navigator作为props
if(navigator) {
navigator.push({
name:'Resume',
component: Resume,
// 传递参数到跳转的界面
params: {
title: title
}
})
}
2 返回按钮操作
{this.props.title}
_pressButton(){
const { navigator } =this.props;
if(navigator) {
navigator.pop();
}
}
3 参数传递（方法之间、父组件和子组件之间）
搜索
{
this.state.show?
dataSource={this.state.dataSource}
renderRow={this._renderRow}
/>
:Util.loading
}
//渲染图书列表项
_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;//当前滑动显示的y轴坐标
letheight= e.nativeEvent.layoutMeasurement.height;//显示部分高度
if(scrollH-y
// this._loadmore();
}
}
(3)alignSelf:对齐方式
alignSelf的对齐方式主要有四种：flex-start、 flex-end、 center、 auto、 stretch。
varReact=require('Dimensions');
console.log(Dimensions.get("window"));
//结果：{width: 375, scale: 2, height: 667}
翻转 样式
transform: [{rotate:'50deg'}],
换行
{`\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 请求成功回调
*/
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
图片自适应
react native 中，图片必须明确写明大小值，不然无法显示，同时width : '100%'',这种写法不支持。
如果需要自适应，有几种做法：
只写高度值，不写宽度值，外层容器使用flex来做好布局，再配合resizeMode实现图片自适应即可。
例子1 :
例子2 :
flex: 1,
alignItems: 'stretch',
}}>
使用Dimensions来获取设备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
网友评论