How to Create an iOS APP with React Native? Here’s how to create an iOS APP with React Native. Next, we’ll cover a lot of controls.
1 AppRegistry.registerComponent(
These are the entry points for defining the application. This is where the JavaScript code starts executing. This is the basic structure of a local user interface response. Each view we define will follow the same basic structure. In this tutorial, we will create a way to browse a book and learn about the book such as the author, title, or a brief introduction about the book. You can also find the book you want by searching for the title or author. I’m going to introduce this application. We’re going to use data from the Google Books API. Review images
Add a TAB bar
The application will have a TAB bar with two entries – Featured and Search. We’ll add it first. Although you have all the code in the index.ios.js file, this is not recommended, as it can get messy as the code in your application increases. For better management, we create categories in different files. Create two JavaScript files in the root directory of your project (in the same location as the index.ios.js file). Name the search.js file and Featured. Open Featured. Js and add the following code.
'use strict';
var React = require('react-native');
var {
StyleSheet,
View,
Text,
Component
} = React;
var styles = StyleSheet.create({
description: {
fontSize: 20,
backgroundColor: 'white'
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
class Featured extends Component {
render() {
return (
Featured Tab
);
}
}
module.exports = Featured;
Copy the codeYou should be familiar with that code; It’s very similar to the code we saw earlier. We set Strict Mode, loaded the React-Native module, created view styles, rendered UI and rendered output () functions. The last line of code outputs the Featured class to make it easier for other files to use. Note that we refer to class and function a little differently from index.ios.js. JavaScript has different ways of representing classes and functions. Feel free to choose your style any way you like. In the rest of the book, we will use the style used above. From the definition in the stylesheet, we can see the basic CSS properties. We set the font size and background color for the text and center content in the view. But you may not be familiar with the Flex :1 style. This is Flexbox, the latest addition to the CSS specification. Flex :1 keeps the space taken up by the element tag container on the screen from its sibling element, which would otherwise have to accommodate its content by taking up enough space. We’ll put more emphasis on Flex in the future. To learn more about Flexbox styles, you can read this guide. Add the following program in search.js.
'use strict';
var React = require('react-native');
var {
StyleSheet,
View,
Text,
Component
} = React;
var styles = StyleSheet.create({
description: {
fontSize: 20,
backgroundColor: 'white'
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
class Search extends Component {
render() {
return (
Search Tab
);
}
}
module.exports = Search;
Copy the codeThe above program is similar to the Featured. Js code except for the text in the text component. Cut and paste everything in index.ios.js below.
'use strict';
var React = require('react-native');
var Featured = require('./Featured');
var Search = require('./Search');
var {
AppRegistry,
TabBarIOS,
Component
} = React;
class BookSearch extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'featured'
};
}
render() {
return (
{
this.setState({
selectedTab: 'featured'
});
}}>
{
this.setState({
selectedTab: 'search'
});
}}>
);
}
}
AppRegistry.registerComponent('BookSearch', () => BookSearch);
Copy the codeAt this point we need to export two modules from the file we created and assign them to variables. Inside the class, we specify a constructor to set a state for the class. Here we use the component’s state function. Create a property called selectedTab and set its value to Featured. We will use Featured to determine which TAB should be active. Then set the default TAB.
In the render () function we use the TabBarIOS component to create a TAB bar. Remember to add components using the destruct job or use fully qualified names, such as react.tabbarios.
We create two TAB bar items. We set the selected state for each item and define a function that will be named when the item is selected. On the Featured TAB, select True to see if the component selectedTab equals “search” if the selectTab status is feature. Whichever TAB is set to true will be the active TAB. We use system ICONS for TAB bar items. Note that we use our custom component tag just like any other component, for example: since we need the corresponding module and assign it to a variable, you can import the component file using the variable. This results in the class inclusion of the code component in the Render () function as if it were part of a file. By the way, I use the same variable name for the class name of each variable, but it doesn’t have to be that way, you can use whatever name you like. When the TAB bar is selected, the properties of the onPress component are defined by the callback function. The function set value of the selectedTab property ultimately determines the active TAB. Open the emulator and reload the application by pressing command-r, and you should see the following display. Review images
Add a Navigation Bar
Next, we’ll add a navigation bar to the application, adding two more files to the project. They will be labels for the root view navigation stack. Name the booklist.js and searchbooks.js files. Add the following code to the booklist.js application.
'use strict';
var React = require('react-native');
var {
StyleSheet,
View,
Component
} = React;
var styles = StyleSheet.create({
});
class BookList extends Component {
render() {
return (
);
}
}
module.exports = BookList;
Copy the codeAdd the following code to the searchBooks.js application.
'use strict';
var React = require('react-native');
var {
StyleSheet,
View,
Component
} = React;
var styles = StyleSheet.create({
});
class SearchBooks extends Component {
render() {
return (
);
}
}
module.exports = SearchBooks;
Copy the codeIn both files, we have created a module with a blank view and output the module.
Modify Featured. Js as shown below:
'use strict';
var React = require('react-native');
var BookList = require('./BookList');
var {
StyleSheet,
NavigatorIOS,
Component
} = React;
var styles = StyleSheet.create({
container: {
flex: 1
}
});
class Featured extends Component {
render() {
return (
);
}
}
module.exports = Featured;
Copy the codeThe next Search,js change is as follows:
'use strict';
var React = require('react-native');
var SearchBooks = require('./SearchBooks');
var {
StyleSheet,
NavigatorIOS,
Component
} = React;
var styles = StyleSheet.create({
container: {
flex: 1
}
});
class Search extends Component {
render() {
return (
);
}
}
module.exports = Search;
Copy the codeJust like on Featured. Js, a navigation controller is created on top, sets its initial route and gives it a title.
Reload the application and you should see something like this:
Review images
Get and display data
Now we’re going to read the data. First we build the view with the fake data, then we use the real data from the API. Add the following and other variable declarations at the top of the booklist.js file.
var FAKE_BOOK_DATA = [
{volumeInfo: {title: 'The Catcher in the Rye', authors: "J. D. Salinger", imageLinks: {thumbnail: 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api'}}}
];
Copy the codeModify the deconstruction task until the display contains more than one component.
var {
Image,
StyleSheet,
Text,
View,
Component,
} = React;
Copy the codeAdd the following template:
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 10
},
thumbnail: {
width: 53,
height: 81,
marginRight: 10
},
rightContainer: {
flex: 1
},
title: {
fontSize: 20,
marginBottom: 8
},
author: {
color: '#656565'
}
});
Copy the codeThen modify the class as shown:
class BookList extends Component {
render() {
var book = FAKE_BOOK_DATA[0];
return (
{book.volumeInfo.title} {book.volumeInfo.authors} ); }}Copy the code
{book.volumeInfo.title} {book.volumeInfo.authors} ); }}Reloading the application should display the following:
Review images
In the code above, we created a target JSON similar to that called from the API, through which we created the properties and values for a single book. In the class file, we use fake data just to get the first element to populate our view. We use the image component to load the image into a view. Note that we are going to set its width and height in the stylesheet. If you do not specify the size of the image in the stylesheet, it will not appear in the view. We specify a flexDirection style: a “row” container. This will make the layout of children with this style element horizontal rather than vertical by default. What matters is how we wrap the other components within the component. On top there is the main container with two children —- an image and a view. This view can display two children of its own —- that is, two text components. First is the image layout, and then the view (right Container) is placed horizontally next to it. We specify a Flex template: 1rightContainer. This makes the view take up the rest of the space instead of the image. If you want to see flex style impact, add the following rightContainer.
backgroundColor: 'red'
Copy the codeReload the application and you’ll see how much space rightContainer style components take up. It occupies the whole space and is not occupied by other siblings. It does not stretch the screen because the outer container has some padding and the image has edge setting rights.
Review images
Delete Flex: 1 from rightContainer and reload the application. Now the component takes up just enough space to fit its content.
Review images
If you set a style for flex:2 thumbnails and rightContainer, they will probably take up the same amount of space, and they will have a 2:2 (or 1:1) width ratio. You can specify any value, and all possible ratios are taken into account.
Review images
You can also try different ratios to get the style you like. For this tutorial, we will continue with adding a red background to rightContainer.
To be continued
OneAPM Mobile Insight Using real user experience as a metricCrash analysisMonitor network requests and errors to improve user retention. accessOneAPM official websiteTo learn more about application performance optimization and to read more technical articles, visitOneAPM official technology blog.