React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
brew install node
brew install watchman
npm install -g react-native-cli
...
class Hello extends Component {
render() {
return (
<Text>Hello {this.props.name}</Text>
)
}
}
class Greeting extends Component {
render() {
return (
<View style={{..}}>
<Hello name="World" />
</View>
)
}
}
...
Props are the basic way to pass parameters to a component. Take for example:
...
class Hello extends Component {
constructor(props) {
super(props);
this.state = { word: 'Hello' };
setInterval(() => {
this.setState({ word: 'from' });
}, 1000);
setInterval(() => {
this.setState({ word: 'React' });
}, 2000)
}
render() {
return (
let words = this.state.word;
<Text>{words}</Text>
)
}
}
class Greeting extends Component {
render() {
return (
<View style={{..}}>
<Hello />
</View>
)
}
}
...
In the previous example we used a prop to control data coming from the parent. For changing data in the component, use state:
...
return (
<Text style={styles.button}>
Login
</Text>
)
...
var styles = StyleSheet.create({
button: {
color: 'white',
padding: 10,
textAlign: 'center',
backgroundColor: '#3e496b'
}
});
Styling should seem pretty familiar... though everything is lowerCamelCase. And layout is all flexbox!
Well, gotmes...