1.绑定this
export default class App extends React.Component {
constructor(props){
super(props)
this.state = {
numb : 33
}
//自定义方法需要自己手动绑定this,否则没法调用 this.state
this.sumAwithB = this.sumAwithB.bind(this);
}
sumAwithB(){
this.setState({
numb:this.state.numb + 1
})
}
render(){
return(
<View style = {{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#ccf'}}>
<Text>ee说说ee+:{this.state.numb}</Text>
<Button
title='cddd'
onPress={this.sumAwithB}></Button>
</View>
)
}
}
如果直接写成 箭头函数,就不用绑定this
export default class App extends React.Component {
constructor(props){
super(props)
this.state = {
numb : 33
}
}
render(){
return(
<View style = {{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#ccf'}}>
<Text>eee说说eee+:{this.state.numb}</Text>
<Button
title='cddd'
onPress={()=>{
this.setState({
numb: this.state.numb+1
})
}}></Button>
</View>
)
}
}
2.react native 默认导(出)入和普通导(出)入 区别
(1). 默认导出 export class, 导入 import FoodMenu from './FoodMenu';
(2).普通导出 export, 导入 导入 import {FoodMenu} from './FoodMenu';
(3).
a.默认: 命名导入 impobrt foodM from './FoodMenu';
b.普通: 命名导入 import {FoodMenu as foodM } from './FoodMenu';
3.经纬度
a. 模拟器设置经纬度的方法:
启动模拟器,选择头部中的Debug-Location-Custom Location
也就是按照下面的顺序点击就行了 iOS Simulator > Features > Location > Custom Location
b.导入库,
cd ./项目根目录
yarn add @react-native-community/geolocation
cd ios
pod install
具体实现代码
import geolocation from '@react-native-community/geolocation';
componentDidMount(){
//弹出手机所在的位置的经纬度
//H5中提供了,navigator.geolocation,让我们获取手机坐标
navigator.geolocation = geolocation;
navigator.geolocation.getCurrentPosition((pos)=>{
//这个函数在,获取完这个经纬度之后来执行
const coords = pos.coords //获取坐标对象
//弹出经度和维度
alert(coords.longitude+","+coords.latitude)
})
}
4 ref > 16.3 禁用字符串,正确写法
官方解释 https://reactjs.org/docs/refs-and-the-dom.html
constructor(props){
super(props)
this.scrollVRef = React.createRef();
}
componentDidMount(){
const scrollV = this.scrollVRef.current;
}
render(){
return(
<View style = {{marginTop:44}}>
<ScrollView
ref={this.scrollVRef}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}//滚动条
>
<View style={styles.box}>
</View>
</ScrollView>
</View>
)
}
5.swiper 在外围添加一个盒子,设置高度
6.Image 设置 宽高 才能展示