See the tutorials at https://facebook.github.io/react-native/docs/style And https://facebook.github.io/react-native/docs/stylesheet React native Styles and positioning More! We’ll at each of these in much more detail later.
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 Must import StyleSheet import { StyleSheet } from 'react-native'; export default homeStyles = StyleSheet.create({ Must export the stylesheet vCenter: { alignItems: 'center', Must must give the stylesheet a name marginTop: 100, }, bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, });
this is in App.js Must import the stylesheet. Importing stylesheets 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 import React, { Component } from 'react'; import { AppRegistry, Text, View } from 'react-native'; export default class styleApp extends Component { import homeStyles from './styles'; render() { return ( <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space- class MyClass extends Component { between', alignItems: 'center', marginTop: 200, }}> constructor(props) { <MyClass text='Ask not what your country can do for you' /> super(props); <MyClass text='To Be or Not To Be' /> this.state = {isShowingText: true}; </View> } ); } render() { } let display = this.state.isShowingText ? this.props.text : ' '; return ( <View> <Text style={homeStyles.red}>{display}</Text> </View> ); } } Class or component name must start with capital
Importing styles… this is in App.js const styles = StyleSheet.create({ import React from 'react'; container: { flex: 1, import { StyleSheet, Text, View } from 'react-native'; backgroundColor: '#fff', import Home from './home'; alignItems: 'center', justifyContent: 'center', export default class App extends React.Component { }, render() { vCenter: { alignItems: 'center', return ( marginTop: 100, <View style={styles.container}> }, bigblue: { <Home origText = "Ask not what your country can do for you" color: 'blue', textStyle={styles.bigblue} /> fontWeight: 'bold', <Home origText = "To be or not to be" textStyle={styles.red} /> fontSize: 30, }, </View> 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
render() { file ./home.js return ( <Text style={this.props.textStyle} onPress = {this.updateState}> {this.state.myState} import React, { Component } from 'react'; </Text> import { AppRegistry, Text, View } from 'react-native'; ); The style was passed as a property. export default class Home extends Component { } Note that using this.styles.bigBlue constructor(props){ } would give an error 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 }) }; };
Height and width import 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.
Flex import 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 import React, { Component } from 'react'; layout import { AppRegistry, View } from 'react-native'; • horizontally ( row ) or vertically export default class FlexDirectionBasics extends Component { ( column ) render() { return ( • defaults to column // 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> ); } };
import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; justifyContent export default class JustifyContentBasics extends Component { render() { return ( • determines // Try setting `justifyContent` to `center`. distribution of // Try setting `flexDirection` to `row`. children along <View style={{ the primary axis . flex: 1, • options are flexDirection: 'column', • flex-start, justifyContent: 'space-between', • center, }}> • flex-end, <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> • space-around, <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> • space-between and <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> • space-evenly. </View> ); }. };
import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; alignItems export default class AlignItemsBasics extends Component { render() { return ( // Try setting `alignItems` to 'flex-start' • determines // Try setting `justifyContent` to `flex-end`. the alignment of children // Try setting `flexDirection` to `row`. along the secondary axis <View style={{ • if the primary axis flex: 1, is row, then the flexDirection: 'column', secondary is column, justifyContent: 'center', and vice versa alignItems: 'stretch', • options: }}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} • flex-start, /> • center, <View style={{height: 50, backgroundColor: 'skyblue'}} /> • flex-end, and <View style={{height: 100, backgroundColor: 'steelblue'}} /> </View> • stretch. ); }. };
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
const styles = StyleSheet.create({ This code is in App.js container: { Example flex: 1, backgroundColor: '#fff', The main class alignItems: 'center', import React from 'react'; justifyContent: 'center', import { StyleSheet, Text, View } from 'react-native'; }, import Home from './Home'; vCenter: { alignItems: 'center', marginTop: 100, }, export default class App extends React.Component { bigblue: { render() { color: 'blue', return ( fontWeight: 'bold', fontSize: 30, <View style={styles.container}> }, <Home origText = "Ask not what your country red: { can do for you" /> color: 'red', <Home origText = "To be or not to be" /> }, </View> Create 2 instances of Home }); Pass different text ); } } Note that we want 2 different models, e.g., classes that store different data
Recommend
More recommend
