Solve Problem/React Native

react-native 여러 가지

안다희 2019. 7. 13. 11:38
728x90

1. setState는 async다

this.setState({

checkList: checkedList,

})

 

 

2. MapView in android

현재 위치 버튼이 안드로이드에서만 안보임

export class MapWithPin extends Component {
    constructor(props) {
        super(props)
        this.state = {marginTop: 0}; // here!!!!!!
    }
    componentWillMount() { // here!!!!!!
        //Hack to ensure the showsMyLocationButton is shown initially. Idea is to force a repaint
       setTimeout(()=>this.setState({marginTop: 1}),500); // here!!!!!!
    }

    render() {
        return (
            <View style={{ height: this.props.height, marginTop: 10, paddingTop: this.state.marginTop }}>
                <MapView
                    showsUserLocation={true}
                    style={{ width: '100%', height: this.props.height }}
                    provider={PROVIDER_GOOGLE}
                    initialRegion={this.props.initialRegion}
                    onRegionChange={(region) => this.props.setCenterCoords(region)}
                    showsMyLocationButton={true} 
                    mapPadding={{top: 140}} // here!!!!!!
                />

 

3. RNCamera 가로로 안뒤집히는 이유

버전업을 안해서!

package.json에서 원하는 버전을 쓰고 저장한 뒤 npm install하고

npm start -- --reset-cache

그러면 변경된게 적용됨

https://github.com/react-native-community/react-native-camera

 

react-native-community/react-native-camera

A Camera component for React Native. Also supports barcode scanning! - react-native-community/react-native-camera

github.com

release 부분 보고 stable한거 대충 보고!!

쓰고 있는 버전 이후에서 방향 조절하는게 생겨서 버전업 한거임!! 굳

 

4. Alert.alert도 비동기다.

async await 쓰면 순서대로 함수 실행 가능.

setTimeout도!

 

5. 그래서 보내기 버튼 눌렀는데 Alert.alert 띄우고 textInput blur 처리하고싶을 때

Keyboard.dismiss()하고 꼭해야해

setTimeout으로 하면 됨

<DeerButton
buttonStyle={{ marginTop: 20 }}
text={'보내기'}
valid={!this.props.inProgress}
onPress={() => {
Keyboard.dismiss()
console.log('this.reportRef.current.isFocused')
console.log(this.reportRef.current.isFocused())
if (privateList.toString() == '') {
setTimeout(() => { // async, await 안되는 이유?
Alert.alert(
'알림',
'사유화 신고 유형을 선택해주세요!',
[
{
text: '확인',
onPress: () => {
// console.log(this.reportRef.curren)
// reportRef가 blur처리가 된 후에 scrollTo가 실행되어야 하므로 async, await을 사용함
// Keyboard.dismiss()
this.reportRef.current.blur()
this.scrollViewRef.current.scrollTo({ y: 0 })
}
}
]
)
}, 50)

console.log('this.reportRef.current.isFocused')
console.log(this.reportRef.current.isFocused())
return
}
const isSuccess = this.props.sendPrivatizationReport('1174', privateList.toString(), report, centerCoords, hasExactDeerLocation, photoUriArr)
isSuccess ? this.successPrivatizationReportRef ?.current ?.open() : null
}}
출처: https://mingos-habitat.tistory.com/34 [밍고의서식지:티스토리]