-NPM version 6.4.1
-expo version 2.6.14
-Atom 1.34.0
-NativeBase 2.10.0. Please refer to link
Note: React Native has too many dependencies and issues for a beginner like me. I have gone through those and it has burnt my many precious hours. Even though I decided to use NativeBase framework to speed up my development cycle but I still need to clear those hurdle that blocked me to get to the end result. I reused sample code from NativeBase as a very simple kickstart for beginners like me to avoid those unnecessary frustration.
Steps
- Run command below to create your first React navigation project.
$ expo init AwesomeNativeBase
- During the prompt of the "Choose a template", choose "> blank minimum dependencies to run and an empty root component" option
- When project creation process is completed, change to "AwesomeNativeBase" directory, run the command below to install native-base component.
$ npm install native-base --save
- Run command below to install vector-icons.
$ npm install @expo/vector-icons --save
- Launch App.js using the Atom IDE. Paste the sample code as shown below
import React, { Component } from 'react';
import { StatusBar } from 'react-native';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';
import {Font, Expo, AppLoading} from 'expo';
export default class AnatomyExample extends Component {
state={
isReady: false
}
async componentWillMount() {
await Font.loadAsync({
'Roboto': require('native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
});
this.setState({isReady:true})
}
render() {
if (!this.state.isReady) {
return <AppLoading />;
}
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title>Header</Title>
</Body>
<Right />
</Header>
<Content>
<Text>
This is Content Section
</Text>
</Content>
<Footer>
<FooterTab>
<Button full>
<Text>Footer</Text>
</Button>
</FooterTab>
</Footer>
<StatusBar hidden />
</Container>
);
}
}
- Back to your command prompt, enter command below to start your CLI.
$ expo start
- Expo Metro bundler will be launched.
- I'm using Expo Android client to conduct my testing. Please refer to link.
- Make sure "Tunnel" is selected at the "Connection" field. Use the Expo Android client to scan the QR code, your application will be launched as shown in the screenshot below.
No comments:
Post a Comment