React Native 4가지 팁

키보드 숨기기

<ScrollView contentContainerStyle={{flexGrow: 1}}
  keyboardShouldPersistTaps='handled'
>
  <TextInput keyboardType='numeric'/>
</ScrollView>

import {Keyboard} from 'react-native'

<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <View style={{flex: 1}}>
        <TextInput keyboardType='numeric'/>
    </View>
</TouchableWithoutFeedback>

Text 컴포넌트 내에 줄 바꿈

\n 뉴라인 사용하면 됩니다

<Text>{`Hi,\nMy Name Is Bora!`}</Text>

로그 남기기

console.log("data")

Android:

npx react-native log-android

iOS:

npx react-native log-ios

Components 숨기고 보이고

React Hook 에서 사용할 때

const [showComponent, setShowComponent] = useState(false)
return(
    <div>
         {showComponent && (<Text>Hello</Text>)}
         <Button onPress={() => {setShowComponent(true)}}>Click me</Button>
    </div>
)

React Hook 없이 사용

{this.state.isHidden ? <ToHideAndShowComponent/> : null}

Uploaded by N2T