react native -...
Post on 30-May-2020
16 Views
Preview:
TRANSCRIPT
React nativeStyles and positioning
More!
We’ll at each of these in much more detail later.
See the tutorials at https://facebook.github.io/react-native/docs/styleAndhttps://facebook.github.io/react-native/docs/stylesheet
Styles
• style your application using CSS/JavaScript. • All of the core components accept a prop named style. • style names and values usually match CSS• except names are written using camel casing, e.g backgroundColor rather
than background-color.• The style prop can be a plain old JavaScript object• You can also use an array of styles • the last style in the array has precedence• so you can use this to inherit styles.
Importing stylesheets…this is in styles.js
• The stylesheet is in a file named “styles.js” in same directory as App.js
import { StyleSheet } from 'react-native';
export default homeStyles = StyleSheet.create({vCenter: {
alignItems: 'center',marginTop: 100,
}, bigblue: {color: 'blue',fontWeight: 'bold',fontSize: 30,
}, red: {color: 'red',
}, });
Must import StyleSheet
Must export the stylesheet
Must must give the stylesheet a name
Importing stylesheetsimport React, { Component } from 'react';import { AppRegistry, Text, View } from 'react-native';import homeStyles from './styles';
class MyClass extends Component {constructor(props) {super(props);this.state = {isShowingText: true};
}
render() {let display = this.state.isShowingText ? this.props.text : ' ';return (
<View><Text style={homeStyles.red}>{display}</Text>
</View>);
}}
export default class styleApp extends Component {render() {return (<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-
between', alignItems: 'center', marginTop: 200, }}><MyClass text='Ask not what your country can do for you' /><MyClass text='To Be or Not To Be' />
</View>);
}}
Class or component name must start with capital
Must import the stylesheet. Note the stylesheet is imported by name, e.g., homeStyles.Note that we must indicate the file name and that it is in the same directory as App.js in quotes
this is in App.js
Importing styles…this is in App.jsimport React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Home from './home';export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Home origText = "Ask not what your country can do for you" textStyle={styles.bigblue} />
<Home origText = "To be or not to be" textStyle={styles.red} />
</View>
);
}
}
const styles = StyleSheet.create({container: {
flex: 1,backgroundColor: '#fff',alignItems: 'center',justifyContent: 'center',
}, vCenter: {
alignItems: 'center',marginTop: 100,
}, bigblue: {
color: 'blue',fontWeight: 'bold',fontSize: 30,
}, red: {
color: 'red',},
});Pass a style that is defined in the file
We create 2 instances of the Home class each with different original text and text styles
file ./home.js
import React, { Component } from 'react';import { AppRegistry, Text, View } from 'react-native';
export default class Home extends Component {constructor(props){
super(props);this.state = { myState: this.props.origText, isOrig: true};
}updateState = () => {
if (this.state.isOrig){this.setState({ myState: 'ask what you can do for
your country', isOrig: false })}else{
this.setState({ myState: this.props.origText, isOrig: true })
}; };
render() {return (
<Text style={this.props.textStyle} onPress= {this.updateState}>
{this.state.myState}</Text>
); }
}
The style was passed as a property.Note that using this.styles.bigBluewould give an error
Height and widthimport React, { Component } from 'react';import { AppRegistry, View } from 'react-native';
export default class FixedDimensionsBasics extends Component {render() {
return (<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /><View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} /></View>
);}
}
Flex
• flex style will expand and shrink dynamically based on available space. • flex: 1, tells a component to fill all available space, shared evenly amongst
each other component with the same parent. • The larger the flex given, the higher the ratio of space a component will take
compared to its siblings.• A component can only expand to fill available space if its parent has
dimensions greater than 0. • If a parent does not have either a fixed width and height or flex, the parent
will have dimensions of 0 and the flex children will not be visible.
Fleximport React, { Component } from 'react';import { AppRegistry, View } from 'react-native';export default class FlexDimensionsBasics extends Component {
render() {return (
// Try removing the `flex: 1` on the parent View.// The parent will not have dimensions, so the children can't expand.// What if you add `height: 300` instead of `flex: 1`?<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}} /><View style={{flex: 2, backgroundColor: 'skyblue'}} /><View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>); }. }
Layout with Flexbox
• A component can specify the layout of its children using flexbox.• Flexbox will provide a consistent layout on different screen sizes.• Use a combination of• flexDirection,• alignItems, and• justifyContent
flexdirection
• determines the primary axis of layout• horizontally (row) or vertically
(column)• defaults to column
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FlexDirectionBasics extends Component {
render() {
return (
// Try setting `flexDirection` to `column`.
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
justifyContent
• determines distribution of children along the primary axis. • options are
• flex-start,• center,• flex-end,• space-around,• space-between and• space-evenly.
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class JustifyContentBasics extends Component {
render() {
return (
// Try setting `justifyContent` to `center`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
); }. };
alignItems• determines
the alignment of children along the secondary axis• if the primary axis
is row, then the secondary is column, and vice versa
• options:• flex-start,• center,• flex-end, and• stretch.
import React, { Component } from 'react';import { AppRegistry, View } from 'react-native';
export default class AlignItemsBasics extends Component {render() {
return (// Try setting `alignItems` to 'flex-start'// Try setting `justifyContent` to `flex-end`.// Try setting `flexDirection` to `row`.<View style={{
flex: 1,
flexDirection: 'column',justifyContent: 'center',alignItems: 'stretch',
}}><View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}
/><View style={{height: 50, backgroundColor: 'skyblue'}} /><View style={{height: 100, backgroundColor: 'steelblue'}} />
</View>); }. };
props
• For a list of all properties for Flexbox see https://facebook.github.io/react-native/docs/layout-props
• For more examples see https://www.tutorialspoint.com/react_native/react_native_flexbox.htm
Styles via classes
• MVC: model-view-controller• Separate code by it’s purpose• Sometimes called container-presentation components in React
• Common method for achieving cascading stylesheet affect• Create a class that applies a style to a Text field• Can use the class in lieu of a Text• Not so useful if adding event handlers
Exampleimport React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Home from './Home';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Home origText = "Ask not what your country can do for you" />
<Home origText = "To be or not to be" />
</View>
); } }
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
vCenter: {
alignItems: 'center',
marginTop: 100,
},
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
This code is in App.js
The main class
Create 2 instances of HomePass different textNote that we want 2 different models, e.g., classes that store different data
Example (cont)import React, { Component } from 'react'import { View } from 'react-native'import PresentationalComponent from './PresentationalComponent'
export default class Home extends Component {state = {
myState: this.props.origText}render() {
return (<View>
<PresentationalComponent myState = {this.state.myState}/></View>
)}
}
This code is in Home.js
The model or container class
Store the passed property in the state
Pass the state to the presentation component.Note that we could have just passed the props
Example (cont)import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
export default class PresentationalComponentextends Component{
render() {
return (
<Text style = {styles.myState}>
{this.props.myState}
</Text>
)
}
}
const styles = StyleSheet.create ({
myState: {
marginTop: 20,
textAlign: 'center',
color: 'blue',
fontWeight: 'bold',
fontSize: 20
}
});
This code is in PresentationComponent.js
The controller
or presentation
class
The style is created here, not in the model class (e.g., Home)
Anytime Home wants to create text with this style, create an instance of this class.
top related