2. react - native: basic
- 2. • Props • State • Style • Height and width • FlexBox • Touch
- 3. Props • Components can be customized at creation time. These customized parameters are called props. <ClassB text={‘Hello world’} /> Here text is props. • In ClassB, for using text, we can write: Const text = this.props.text Const {text} = this.props;
- 4. State • Data, that is going to change, we use state. • You should initialize state in the constructor. this.state = {isShowingText: true}; • Call setState when you want to change it. this.setState(previousState => { return { isShowingText: !previousState.isShowingText }; }); Or this.setState( { isShowingText: !this.state.isShowingText }); • When we want to use state data: const isShowingText = this.state.isShowingText;
- 5. Props Vs State • There are two types of data that control a component. • Props: props are set by the parent and they are fixed throughout the lifetime of a component. • State: For data that is going to change, we have to use state.
- 6. Style • style props is used for styling a component. StyleSheet.create is sued to create all style at a place. const styles = StyleSheet.create({ bigblue: { color: 'blue’ }, red: { color: 'red', }, });
- 7. Height and width • The simplest way to set the dimensions of a component is by adding a fixed width and height to style. <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> • Use flex in a component's style to have the component expand and shrink dynamically based on available space <View style={{flex: 1, backgroundColor: 'powderblue'}} /> <View style={{flex: 2, backgroundColor: 'skyblue'}} /> <View style={{flex: 3, backgroundColor: 'steelblue'}} />
- 8. FlexBox • To accommodate different screen sizes, React Native offers Flexbox support. To achieve the desired layout, flexbox offers three main properties: • flexDirection: Used to align element vertical or horizontal • justifyContent: Used to determine elements distribution inside a container along the primary axis • alignItems: Used to determine elements distribution inside a container along the secondary axis
- 9. flexDirection • Adding flexDirection to a component's style determines the primary axis of its layout. <View style={{flex: 1, flexDirection: 'row'}}>
- 10. justifyContent • Adding justifyContent to a component's style determines the distribution of children along the primary axis. • Values: flex-start • center • flex-end • space-around • space-between • space-evenly <View style={{ flex: 1, flexDirection: 'column',
- 11. alignItems • Adding alignItems to a component's style determines the alignment of children along the secondary axis • Values: • flex-start • center • flex-end • stretch <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }}>
- 12. Touch • We can handle touch using following components: • Button <Button onPress={() => { Alert.alert('You tapped the button!'); }} title="Press Me" /> • TouchableHeightLight: Change background color on touch • TouchableOpacity: Change opacity on touch • TouchableWithoutFeedback: No effect < TouchableWithoutFeedback onPress={() => { Alert.alert('You tapped the button!'); }} > <View /> </ TouchableWithoutFeedback >