Frontend
-
[expo][react native] <NumericInput /> re-render issue 해결Frontend/react-native 2019. 9. 20. 17:13
react native에선 this.setState({}) 호출시 컴포넌트들이 리랜더링된다. 다시말해 state 값의 변경이 발생하면 render()가 호출되어 실행된다. 아래의 코드는 계속 문제없이 작동이 되다가.. 언제부턴가 state 값은 바뀌는데, UI상에선 값이 그대로 유지하게 되었다. (예를들어 set_num의 값이 1인데 setState()로 set_num의 값을 2로 바꾸면, 실제 값은 바뀌는데 UI 상에선 1이 그대로 유지된다.) this.setState({set_num: value })} value={this.state.set_num} /> 이 문제를 해결하는 방법은 매우 간단하다. 아래와 같이 initValue 속성을 추가하면 된다. this.setState({set_num: valu..
-
[react native] 안드로이드 상태바 겹침 현상 해결 (Android header is overlapped)Frontend/react-native 2019. 9. 4. 15:49
expo react native 앱을 개발하는데 아래 캡쳐와같이 상단에 상태바와 헤더가 겹치는 현상이 발생했다. 해결책을 찾아 구글링을 하고 https://github.com/react-navigation/react-navigation/issues/1478#issuecomment-301220017 Android header is overlapped · Issue #1478 · react-navigation/react-navigation On iOS I see this On Android I see this.. The code uses defaults const AppRoot = StackNavigator({ Home: { screen: HomeScreen, navigationOptions: ({ navi..
-
[react native] icon list (link)Frontend/react-native 2019. 8. 14. 17:24
https://oblador.github.io/react-native-vector-icons/ react-native-vector-icons directory oblador.github.io https://docs.nativebase.io/Components.html#anatomy-headref Components · NativeBase type Ionicons AntDesign, Ionicons, Entypo, EvilIcons, Feather, FontAwesome, FontAwesome5, Foundation, MaterialIcons, MaterialCommunityIcons, Octicons, Roboto, rubicon-icon-font, SimpleLineIcons, Zocial Specif..
-
[Solved] Failed updating the 'react-native-numeric-input' component..Frontend/react-native 2019. 8. 13. 18:09
https://www.npmjs.com/package/react-native-numeric-input react-native-numeric-input a stylish numeric input for react native www.npmjs.com 개발하는 앱에 위의 numeric input 컴포넌트를 적용했다. 그런데 랜더링시 value부분이 업데이트가 계속 안되어서 내 코드 문제인줄 알고 한참을 헤맸다.. 알고보니 모듈내 소스코드의 문제였다.. 해답 출처: https://github.com/himelbrand/react-native-numeric-input/issues/13 Value not updating on Numeric Input · Issue #13 · himelbrand/react-nati..