React-Native
安装WiniOS
原生知识点andriod的activity跳转 两个activity之间的跳转。 andriod系统根据生命周期的不同阶段唤起对应的回调函数来执行代码。系统存在启动鱼销毁一个activity的一条有序的回调函数。 Acitivity: Activity包含一个Window，改window在Acitivity的attach方法中调用
flex布局react-native中的flex布局应用的6的属性 flexvar Text = React.createClass({
render() {
return (
<View style={styles.style_0}>
<View style={styles.style_1}></View>
<View style={styles.style_1}></View>
<View style={{flex: 10}}></View>
</View>
);
}
});
var styles = StyleSheet.create({
style_0: {
flex: 1,},style_1: {
flex: 5,height: 40,borderWidth: 1,borderColor: 'red'
}
});
当一个组件(元素)，定义了flex属性时，表示改元素是可伸缩的。 代码中：最外层的View是可伸缩的，因为没有兄弟节点和它占空间，占满全屏。里层是3个View，可以看到三个View的flex属性加起来是5+5+10 = 20.所以第一个View和第二个View分别占1/4伸缩空间，最后一个View占据1/2空间。 flexDireaction属性值： flexWrapflexWrap属性值： alignItemsalignItems属性值： alignSelfalignSelf横向对其方式： justifyContentjustifyContent纵向对其方式： 样式
const styles = StyleSheet.create({
container: {
flex: 1,flexDireaction: 'column',width: Dimensions.get('window').width
}
});
定位position top left bottom right 布局RN是 width height margin padding border flex系列 marginVertical // 上下外留白的简写，如果marginTop和marginBottom一样。 marginHorizontal // 左右外留白的简写 paddingVertial paddingHorizontal 背景backgroundColor backgroundVisibility 文字color fontFamily fontSize fontStyle fontWeight textAlign textDecorationColor textDecorationLine textDecorationStyle letterSpacing lineHeight 阴影shadowColor 阴影色iOS only shadowOffset 阴影距离iOS only shadowOpaicty 阴影透明度iOS only shadowRadius 阴影半径 iOS only elevation 仰角 android only // 这是属性影响着元素的z-index，就是绝对定位时覆盖顺序，也会在元素上产生一个阴影。 其它opacity overflow resizeMode rotation scaleX scaleY transform transformMatrix translateX translateY writingDirection 文本输入constructor(props) {
super(props);
this.state = { text: '' }
}
render() {
return (
<View style={{padding: 10}}>
<TextInput style={{height: 40}} placeholder="transilate!" onChangeTex={(textCont) => this.setStatet({text: textCount})} />
<Text style={{padding: 10,fontSize: 40}}>
{this.state.text.split(' ').map((word) => word && 'aaa').join()}
</Text>
</View>
);
}
react-native布局的一些坑
react语法jsx语法 生命周期componentWillMount：组件创建之前 样式解析
设置属性默认值Recat.createClass({
getDefaultProps() {
return {
sign: '正在加载...'
}
}
});
事件绑定class TestReact extends Component {
construcotr(props) {
super(props);
this.state = {
name: 'a'
}
}
changeState() {
this.setState({
name: 'b'
});
}
render() {
return (
<View onToucheEnd={this.changeState}>
<Text>当前状态是：{this.state.name}</Text>
</View>
);
}
}
把 获取元素
class TestReact extends Component {
getPos() {
this.res.position.measure((fx,fy,width,height,px,py) => {
console.log('位置：','x:',fx,'y:',fy);
});
}
render() {
return (
<View onTouechEnd={this.getPos}>
<Text ref={"position"}>位置</Text>
</View>
);
}
}
全局对象在RN中，引用全局对象可以使用window或者global，它们都指向一个对象 -- propsProps属性 class Test exntds Compontent {
render() {
return (
<View>
<Text>HELLO {this.props.name}</Text>
</View>
);
}
}
export default class FirstApp extned Componet {
render() {
return {
<View style="{{alignItems: 'center'}}">
<Test name='react' />
<Test name='react-native' />
<Test name='android' />
</View>
}
}
}
state在constructor中初始化state，然后再需要修改时调用setState方法。 设置： constructor(props) {
super(props);
this.state = {
count: 0
}
}
doUpdateCount() {
this.setState({count: this.state.count + 1});
}
redux状态（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |