bekusib's develop story bekusib's develop story

React Native

• [expo] Changing segment content onPress on react-native

  Frontend/react-native 2019. 11. 6. 18:14

  leanmass 프로젝트에 볼륨 탭에 segment를 적용시켜 보려고 한다. (I'll set segment content page in the Volume Tab on My 'Leanmass' application.) 랜더링 부분은 아래와같이 해준다. (First, define rendering view.) 볼륨 기간별 종목별 {this._renderComponent()} 필요한 함수를 정의하고 (and define functions) selectComponent = (activePage) => () => this.setState({activePage}); _renderComponent = () => { if(this.state.activePage === 1) return //... Your Compo..

  Read More
• [expo] vector icon

  Frontend/react-native 2019. 10. 15. 15:09

  import { Ionicons } from '@expo/vector-icons'; icon list: https://expo.github.io/vector-icons/ @expo/vector-icons directory expo.github.io

  Read More
• [expo] [react native] make .csv file

  Frontend/react-native 2019. 9. 23. 20:34

  헬스앱을 만들면서 sqlite에 저장된 데이터를 .csv 파일 export 해서 메일로 보낼려고 한다. 작성 코드는 아래와 같다. let rows = [ ["종목명", "세트번호", "무게", "반복횟수", "휴식시간", "볼륨", "날짜"] ]; let csvContent = "\uFEFF";// 한글 깨짐 방지 // sql 결과값을 배열값으로 rows에 푸시 async insertCsvRows(rows, records) { try { await records.forEach(function(record) { const arrayOne = [`${record.종목명}`,`${record.세트번호}`,`${record.무게}`,`${record.반복횟수}`,`${record.휴식시간}`,`${record...

  Read More
• [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..

  Read More
• [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..

  Read More
• [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..

  Read More
• [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..

  Read More