Workshop Apps with ReactNative II:
- React Native short Recap
- Navigation in React Native Apps
- Tabs & Other Architectural Components
- Lists & Other Presentational Components
- OpenSource Important Components
Presentado por ingenieros Raúl Delgado y Marc Torrent
3. React Native: is a library to generate
native apps for iOS and Android mobile devices capable,
programmed in javascript.
React Native uses the actual native components of each
platform (currently iOS and Android).
Useful Native APIs
React Native Part I
5. Navigator: Intro
Navigator handles the transition
between different scenes in your app.
It is implemented in JavaScript and is
available on both iOS and Android.
renderScene: It is the prop that got a
function that is responsible for,
according to the name or index of the
route, we will render a view or
another.
6. Navigator: Intro
Navigator handles the transition
between different scenes in your app.
It is implemented in JavaScript and is
available on both iOS and Android.
renderScene: It is the prop that got a
function that is responsible for,
according to the name or index of the
route, we will render a view or
another.
renderScene(route, navigator) {
switch (route.name) {
case 'Login':
return (
<Login {...route.props}
navigator={navigator} route={route} />
);
case 'Dashboard':
return (
<Dashboard {...route.props}
navigator={navigator} route={route} />
);
default:
return null;
}
}
How navigate:
const route = {
title: 'Title,
name: 'NameComponent',
passProps: {propsToPass: true}
}
this.props.navigator.replace(route);
this.props.navigator.push(route);
this.props.navigator.pop( );
7. Navigator: Transitions
We can configure the navigation bar
properties, through the routeMapper
configureScene :
Optional function where you can
configure scene animations and
gestures.
Available scene configutation options
are:
Navigator.SceneConfigs.PushFromRight (default)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRigh
t
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump
<Navigator
configureScene={(route) => {
return
Navigator.SceneConfigs.FloatFromBottom;
}}
navigationBar={
<Navigator.NavigationBar
routeMapper={NavigatorBarRouterMapper} />
}
/>
8. Navigator: Transitions
We can configure the navigation bar
properties, through the routeMapper
configureScene :
Optional function where you can
configure scene animations and
gestures.
Available scene configutation options
are:
Navigator.SceneConfigs.PushFromRight (default)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRigh
t
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump
<Navigator
configureScene={(route) => {
return
Navigator.SceneConfigs.FloatFromBottom;
}}
navigationBar={
<Navigator.NavigationBar
routeMapper={NavigatorBarRouterMapper} />
}
/>
const NavigatorBarRouterMapper = {
LeftButton: (route, navigator, index) => {
return (
<TouchableHighlight onPress={() => {
navigator.pop();
} }>
<Text>Back</Text>
</TouchableHighlight>
);
},
RightButton: (route, navigator, index) => {
return null;
},
Title: (route, navigator, index) => {
return (
<Text >{route.name}</Text>
);
},
};
12. ScrollableTabView - Universal
$ npm install react-native-scrollable-tab-view
Tabbed navigation that you can swipe between, each tab
can have its own ScrollView and maintain its own scroll
position between swipes.
<ScrollableTabView>
<Componente1 tabLabel="comp1" />
<Componente2 tabLabel="comp2" />
<Componente3 tabLabel="comp3" />
</ScrollableTabView>
14. ListView
Use ListView to render a list of components.
Use a ListViewDataSource as the source of your ListView.
The ListViewDataSource has two main methods:
- rowHasChanged: function that handles if a row has to be re-rendered
- cloneWithRows: the datasource used by ListView is inmutable. So,
ListViewDataSource provides this method in order to clone the pre-existing
or new data list.
The ListView has the renderRow and renderSectionHeader props that are functions
that we provide to the ListView in order to render the cells.
renderRow (rowData, sectionID, rowID, highlightRow)
rowData → The data we will use to render our component inside this cell
sectionID, rowID → if we need to change our component from positioning
16. ...
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(data, sectionID, rowID) => <MyCustomView {...data} />}
renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
style={styles.listview} />
);
}
ListView - renderScrollComponent
renderScrollComponentallows setting wich component will render the scrolling
part of our list. By default ListView uses ScrollView.
For performance it’s better to use RecyclerViewBackedScrollView.
Also, you’ll find a lot of scrollable components such as InfiniteScrollView,
InvertibleScrollView, ScrollableMixin, ScrollableDecorator