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.

您可能感兴趣的

如何实现 React Native 里的页面导航系统 React Native 中的页面导航和跳转一直是一个让人头疼的问题,其实社区里也已经有各种实现,比如 react-navigation , wix/react-native-navigation , LeoLeBras/react-router-navigation , ...
Issue 19: React Native 0.51 Happy Holidays! Issue 19: React Native 0.51 0.51 Highlights, Android Lock Pattern in React Native, Le...
React Native 0.47.0正式版发布 React Native 0.47.0 已正式发布。 重大变化: Android Remove unused createJSModules calls 通用 修复 Virtual...
Invoking external API from React Native using Fetc... This is the 5th post in the series of Learn React Native. So far we have learned to: Setup React Native; Add buttons and images and style...
Creating a React Native Bridge Library React Native is really good at straddling the line between native and JavaScript. There is a bridge between the two that allows you to call native cod...
0
Github

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