react native 知识点积累

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

image

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 设置 宽高 才能展示