React Native Starter Kit

综合技术 2018-03-07

React Native Starter

This is a simple starter project for React Native , Native Base , MobX , React Native Navigation .

The most useful components, libraries and packages for react-native are gathered together.

Demo of this project is available on Expo .

Watch YouTube video

Contents

  1. NativeBase - Customize getTheme
  2. Navigation
  3. Routing parameters
  4. Modal
  5. First Launch screen (AsyncStorage)
  6. Swiper
  7. Horizontal Scroll
  8. Carousel
  9. Background Image, Text over an image
  10. Gradient background
  11. Fetch example
  12. Status bar
  13. MobX
  14. Layout
  15. OneSignal Notifications
  16. WebView

NativeBase

NativeBase - open source project to build React Native apps (Essential cross-platform UI components for React Native). You can get more brief information about NativeBase from their [website](( https://nativebase.io ) or GitHub page.

In this project we have used customized NativeBase components.

Steps to be followed to customize NativeBase:

  • Run this command from your terminal after installing native-base.
node node_modules/native-base/ejectTheme.js
  • All the theme files and variables get added to your project root. Change the variables or theme files.
  • Wrap the code or component to which you want to apply the theme with StyleProvider.
  • Pass the variable i.e., platform/material/commonColors.js as the parameter of theme function, which is passed as a value to style prop of component StyleProvider.
  • The theme you pass should be a function.

The native-base-theme dir is generated automatically after running the command above. Inside the directory are two folders named components and variables.

The components folder contain the theme styling files for all the components. This is where you would change the style properties of the components if you need to.

Example, if you need to change the height of Button component, you'll need to change this line in native-base-theme/components/Button.js .

The variables folder contain three preset theme variables. You can change the variables (for color, fontFamily, iconFamily etc) for a uniform look and feel throughout your app.

Read more about customization here https://docs.nativebase.io/Customize.html#Customize

Navigation

React Navigation This is one of the best React Native libraries for Routing and Navigation purposes.

Read the doc from the official website .

In this project we have used TabNavigator . You can see the configuration in ./App.js file.

Some Tips for React navigation

  • If you want to hide tabBar on some screen, set navigationOptions: { tabBarVisible: false }

For example:

const Nav =  (MainScreenNavigator = TabNavigator(
  {
    Home: { screen: HomeScreen },
    Test: { screen: TestScreen },
    Intro: {
      screen: IntroScreen,
      navigationOptions: { tabBarVisible: false }
    },
    Detail: { screen: DetailScreen }
  },
  {
    ...
  }
));
  • You can create a StackNavigator for each screen
  • Use withNavigation from react-navigation to access navigation from everywhere 🙂 See ./src/components/Alphabet.js for example.
import { withNavigation } from 'react-navigation';

withNavigation is a higher order component which passes the navigation prop into a wrapped component. It's useful when you cannot pass the navigation prop into the component directly, or don't want to pass it in case of a deeply nested child.

Routing parameters

How to pass parameters to the screens ?

See the example in the Alphabet component. Params are passed to the navigate method as the second parameter.

 props.navigation.navigate("Detail", {letter: item[0]}) }>
  ...

In ./src/screen/DetailScreen you can see how to access this parameters.

const DetailScreen = (props) => (
  
    This is letter
    { props.navigation.state.params.letter }
  
);

Read more on the website .

Modal

Click the last item on the tabBar navigation to see the modal example.

The Modal component is a simple way to present content above an enclosing view.

To show or hide modal set the visible attribute to true or false .

import { Modal } from 'react-native';

<Modal
  animationType="slide"
  transparent={false}
  visible={AppStore.modalVisible}
  ...

First Launch screen (AsyncStorage)

You can use Modal for the Intro Screen (First Launch Screen) for example. To show screen once use AsyncStorage .

AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

See react-native-app-intro on GitHub. This is a react native component implementing a parallax effect welcome page using base on react-native-swiper .

Swiper

On the modal window we have used react-native-swiper as a full screen horizontal slider.

See the usage example in the Modal component.

  
    Hello Swiper
  
  
    Beautiful
  
  
    And simple
  

Horizontal Scroll

Open the ./src/components/Alphabet component. You can see horizontal scrolling example in this file.

...

To hide Scroll Indicator set showsHorizontalScrollIndicator to false

Carousel

Background Image, Text over an image

You can use ImageBackground component for this purpose. See the example in the ./src/screens/TestScreen file.

import { ImageBackground } from 'react-native';


  This is a text over an image

Gradient background

This component is included into Expo SDK .

We have used this component to render background gradient for letters in the Alphabet component.

  
    {item[0]}
  

GitHub repo is available.

Fetch example

First Read the React Native Networking doc from the official website.

Then open the IntroScreen and see the example.

componentDidMount(){
  return fetch('https://api.github.com/users/malik-aliyev-94')
    .then((response) => response.json())
    .then((responseJson) => {

      this.setState({
        isLoading: false,
        data: responseJson,
      }, function(){

      });

    })
    .catch((error) =>{
      console.error(error);
    });
}

Also ActivityIndicator is used here.

Status bar

There is a small package to determine whether if the device is iPhoneX and then set he StatusBar height.

export const StatusBarView = (props) => (
  
);

MobX

MobX is a simple, scalable state management tool.

Dashboard on the HomeScreen also Modal window configured using MobX.

Store file is located at the ./src/stores dir.

Read more about MobX here .

React bindings for MobX

Layout

The Full React Native Layout Cheat Sheet - this article on medium is highly recommended to read to understand

OneSignal Notifications

WebView

OneSignal Notifications, WebView and other features and components will be included to this project in the future.

您可能感兴趣的

Isomorphic Asset System for React and React-Native Proudly introducing our latest Open Source project, Asset System , which is built upon our previously released svgs library. ...
Use the Native Web Component Shadow DOM API as Rea... react-shade Use the native Web Component Shadow DOM API as React components in a super-duper-Reacty way (i.e. declaratively). Check out the de...
我的前端故事—-来聊聊react-native应用的健康监控... 监控什么 今天我们来聊聊如何监控你的应用程序,这里的监控说的不是让我们去监控用户,而是监控应用的 健康状态 ,什么是健康状态呢?对于后端的同学来说,在微服务的架构下,每个子服务是否正常工作、返回的结果是否满足预期,这些就算是健康状态,再举个例子,你的台式机,对于操作系统来说,每个硬件是否能正常...
我的2017年过去了 2017年的最后一天,想说的很多,下笔却感觉很是惶恐,一年从头到尾,开始的时候信心满满,到年终却又感觉很多想做的事没有完成。细细回想起来,年年如此。 不过一年里也算完成了一部分自己的规划,且学且行,不管从工作上还是个人成长,都有一些收获。 工作方面 作为一只程序猿,本职...
Shipping React Native apps with Fastlane Originally posted at carloscuesta's blog Building native applications with React ( JavaScript ) is awesome :heart:. Until ...
0
Github

责编内容来自:Github (本文源链)
阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。