React native - Microsoft Azure

See the tutorials at And

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

import { StyleSheet } from 'react-native';

Must import StyleSheet

export default homeStyles = StyleSheet.create({ vCenter: {

alignItems: 'center', marginTop: 100, }, bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, });

Must export the stylesheet Must must give the stylesheet a name

this is in App.js

Importing stylesheets

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

import React, { Component } from 'react';

import { AppRegistry, Text, View } from 'react-native'; import homeStyles from './styles';

export default class styleApp extends Component { render() {

return (

class MyClass extends Component {

constructor(props) {

super(props);

this.state = {isShowingText: true};

}

);

}

render() {

}

let display = this.state.isShowingText ? this.props.text : ' ';

return (

{display}

);

}

}

Class or component name must start with capital

Importing styles...this is in App.js

import React from 'react';

const styles = StyleSheet.create({ container: {

import { StyleSheet, Text, View } from 'react-native';

flex: 1,

import Home from './home';

backgroundColor: '#fff', alignItems: 'center',

export default class App extends ponent { render() {

justifyContent: 'center', }, vCenter: {

return (

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

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download