NativeBase：React Native的缺失部分

React Native is something I call a breakthrough in mobile app development; bringing the best of web development, making native app development how it’s supposed to be i.e. completely native.

我称React Native是移动应用程序开发的突破。 带来最佳的Web开发，使本机应用程序开发完全是本机的。

However, React Native has too low level APIs and small components where we end up rewriting many basic components ourselves for each project, which is where NativeBase fills in.

但是，React Native的API和底层组件太低了，我们最终会为每个项目自己重写许多基本组件，而NativeBase正是这些项目。

NativeBase is an open source framework that lets you write high-quality React Native apps with ease by providing generic re-usable components (header, footer, buttons, lists, cards etc.) and in this tutorial, we’re going to do a demo of the same. The source code is available in this Github repo.

NativeBase是一个开放源代码框架，通过提供通用的可重用组件 （页眉，页脚，按钮，列表，卡片等），您可以轻松编写高质量的React Native应用，在本教程中，我们将做一个演示相同。 该Github存储库中提供了源代码。

让我们使用React Native和NativeBase构建一个“ Github Repository Finder App” ( Let’s build a “Github Repository Finder App” using React Native & NativeBase )

基本设定 (Basic Setup)

If you haven’t already, install React Native on your system.

如果尚未安装 ， 请在系统上安装React Native 。

启动一个新的React Native项目 (Initiate a fresh React Native project)

react-native init nativebaseTutorial

安装NativeBase (Install NativeBase)

cd nativebaseTutorial 
npm install native-base --save 
rnpm link

And we’re done with the basic setup. Now,

我们完成了基本设置。 现在，

令人兴奋的部分：让我们开始研究代码 (The Exciting part: Let’s get down with the code)

Since we’re going to keep a single codebase for iOS and Android, let’s create an empty app.js file and add the following lines in both index.ios.js and index.android.js file.

由于我们将为iOS和Android保留单个代码库，因此我们创建一个空的app.js文件，并在index.ios.js和index.android.js文件中添加以下行。

import App from './app';
export default App;

Now, to include the NativeBase components, we simply import the list of NativeBase components that we want to use in our app.

现在，要包括NativeBase组件，我们只需导入要在应用程序中使用的NativeBase组件列表 。

So we go to our project’s app.js file and include the components that we wish to use in our app the syntax of which is,

因此，我们转到项目的app.js文件，并包含我们希望在我们的应用程序中使用的组件，其语法为：

import { list of Components } from 'native-base';

For instance, to use Container, Content and Text, the code is:

例如，要使用Container ， Content和Text ，代码是：

import { Container, Content, Text } from 'native-base';

The basic structure of our app will be a Container component inside which we will add Header and Content components.

我们应用程序的基本结构将是一个Container组件，在其中添加Header和Content组件。

Now to begin with, first what we need is an InputGroup with a search Icon inside the Header to search the repositories. For that, we add

现在开始，首先我们需要一个InputGroup ，在Header中带有一个搜索图标以搜索存储库。 为此，我们添加

<Header searchBar rounded>                            
    <InputGroup>                        
        <Icon name="ios-search" />                        
        <Input placeholder="Search" value={this.state.search}  onChangeText={(text) => this.setState({search:text})} onSubmitEditing={()=>this.search()}/>                    
    </InputGroup>                    
    <Button transparent onPress={()=>this.search()}>Go</Button>                
</Header>

We have used Github API in the search function to load the repositories, and to connect to Github, we have used fetch API.

我们在搜索功能中使用了Github API来加载存储库，并使用fetch API来连接到Github。

search() {   
    // Set loading to true when the search starts to display a Spinner        
    this.setState({            
        loading: true          
    });

    var that = this;        
    return fetch('https://api.github.com/search/repositories?q='+this.state.search)            
    .then((response) => response.json())            
    .then((responseJson) => {      
        // Store the results in the state variable results and set loading to                  // false to remove the spinner and display the list of repositories                 that.setState({                    
        results: responseJson,                    
        loading: false                
    });
    return responseJson.Search;            
}) 
    .catch((error) => {
        that.setState({                    
        loading: false                 
    });
        console.error(error);        
    });    
}

Next we get down to the Content part, where we use the List component to list down the repositories. For every repository’s List, there will be a ListItem component.

接下来，我们进入内容部分，在这里我们使用列表组件列出存储库。 对于每个存储库的List，将有一个ListItem组件。

Now, how does that work?

现在，如何运作？

The List component is used as a substitute for the React Native ListView component, which can be used for static as well as dynamic data. In this case, we’re iterating over results.items in our state and rendering the items as item. For each item, there will be a ListItem component around it, consisting of Thumbnail and Text components.

List组件用作React Native ListView组件的替代品，该组件可用于静态和动态数据。 在这种情况下，我们要遍历状态中的results.items并将这些项目呈现为item。 对于每个项目，周围都会有一个ListItem组件，其中包括Thumbnail和Text组件。

<List dataArray={this.state.results.items} renderRow={(item) =>               
    <ListItem button onPress={()=>this.setModalVisible(true, item)} 
        <Thumbnail square size={80} source={{uri: item.owner.avatar_url}} />        
        <Text>Name: <Text style={{fontWeight: '600', color: '#46ee4b'}}>{item.name}</Text></Text>
        <Text style={{color:'#007594'}}>{item.full_name}</Text>    
        <Text note>Score: <Text note style={{marginTop: 5}}>{item.score}</Text></Text>    
    </ListItem>                            
} />}

At this stage, our app looks like the following on an iOS/ Android screen.

在此阶段，我们的应用在iOS / Android屏幕上如下所示。

Now, let’s go ahead and make the details page for these repositories.

现在，让我们继续制作这些存储库的详细信息页面。

We want the page to show the logo, repository name, primary data like type, stars, language, open issues and last updated along with a button to go back. To create this page, we will use Modal component from React Native.

我们希望页面显示徽标，存储库名称，主要数据（如类型，星号，语言，未解决的问题和最新更新）以及返回的按钮。 要创建此页面，我们将使用React Native中的Modal组件。

When user clicks on any repository in the list, this repository will be stored in selectedItem state variable and the Modal will open showing all the repository details.

当用户单击列表中的任何存储库时，该存储库将存储在selectedItem状态变量中，并且Modal将打开，显示所有存储库详细信息。

So for this we use the NativeBase Card component inside Modal component and further include Image, h4, Text and Button components inside each CardItem component. The code for this is as follows.

因此，为此，我们在Modal组件内使用NativeBase Card组件，并在每个CardItem组件内进一步包括Image ， h4 ， Text和Button组件。 为此的代码如下。

<Modal
    animationType="slide"
    transparent={false}
    {/* state variable modalVisible decides whether modal will be open/closed */}
    visible={this.state.modalVisible}
    onRequestClose={() => {alert("Modal has been closed.")}}
    >
    <Card style={{paddingTop: 20}}>
        {Object.getOwnPropertyNames(this.state.selectedItem).length===0 ? <View />
        : <CardItem cardBody style={{justifyContent: 'flex-start'}}>
        <Image style={styles.modalImage} source={{uri: this.state.selectedItem.owner.avatar_url}}  />
        <h4 style={styles.header}> {this.state.selectedItem.name}
        </h4>
        <Text style={styles.negativeMargin} >
        Type: <Text style={styles.bold}>{this.state.selectedItem.owner.type}</Text>
        </Text>

        <Text style={styles.negativeMargin} >
        Stars: <Text style={styles.bold}>{this.state.selectedItem.stargazers_count}</Text>
        </Text>

        <Text style={styles.negativeMargin} >
        Language: <Text style={styles.bold}>{this.state.selectedItem.language}</Text>
        </Text>

        <Text style={styles.negativeMargin} >
        Open Issues: <Text style={styles.bold}>{this.state.selectedItem.open_issues_count}</Text>
        </Text>
        <Text>

        Last Update: <Text style={styles.bold}>{this.state.selectedItem.updated_at.slice(0,10)}</Text>
        </Text>

        <Button danger style={{alignSelf: 'flex-end'}} onPress={() => {
        this.setModalVisible(!this.state.modalVisible, this.state.selectedItem)
         }}>
            Go Back
        </Button>
        </CardItem>
        }
    </Card>
</Modal>

The resulting page looks like the following on the respective platforms.

在相应的平台上，结果页面如下所示。

We’ve also added Spinner component for a nicer touch to it.

我们还添加了Spinner组件，以使其更加美观。

Ultimately, our app looks like this on both the platforms, iOS and Android respectively.

最终，我们的应用程序分别在iOS和Android平台上都看起来像这样。

Go ahead and explore the complete code altogether on the Github repo.

继续并在Github存储库上探索完整的代码。

Also, it’s available on Google Play Store so you can analyze the app performance too.

此外，它还可以在Google Play商店中使用，因此您也可以分析应用性能。

基于NativeBase的其他项目 ( Other Projects Based Over NativeBase )

Three React Native starter apps made by the team using NativeBase are:

团队使用NativeBase制作的三个React Native入门应用程序是：

• Native Starter Kit on StartReact
  StartReact上的本机入门工具包
• Native Starter Pro on StrapMobile
  StrapMobile上的Native Starter Pro
• React Native Flat App on StrapMobile
  在StrapMobile上ReactNative Flat App

While Native Starter Pro and React Native Flat App are premium themes, Native Starter is open source.

虽然Native Starter Pro和React Native Flat App是高级主题，但Native Starter是开源的。

React Native和NativeBase的Power Pack ( Power Pack of React Native and NativeBase )

By providing a “native environment” to build “native apps” and a consistent set of tools and technologies, React Native is truly awesome. Same principles are to be followed everywhere, as claimed by their tagline, “Learn once, write anywhere.”

通过提供一个“本机环境”来构建“本机应用程序”以及一套一致的工具和技术，React Native确实很棒。 正如他们的标语“学习一次，随处写”一样，在任何地方都应遵循相同的原则。

NativeBase covers the few shortcomings that it has, making it overpowering.

NativeBase弥补了它的一些缺点，使其功能强大。

Its stack of components is built using native UI components so there are no compromises with the UX.

它的组件堆栈是使用本机UI组件构建的，因此与UX互不妥协。

You can use any native third-party libraries out of the box. You do not need to use wrappers or do any other actions.

您可以直接使用任何本机第三方库。 您不需要使用包装器或执行任何其他操作。

Additionally, there’s option for further customization which in fact is pretty easy and straightforward. You can define your styles in the theme file and simply import it.

另外，还有进一步定制的选项，实际上非常简单明了。 您可以在主题文件中定义样式，然后简单地将其导入。

Check out the official documentation for more details.

查看官方文档以了解更多详细信息。

结论 ( Conclusion )

NativeBase lets you experience the awesomeness of React Native without the pain. It’s completely open source so you have no reason to wait. Go ahead, try it out and do let us know your comments.

NativeBase让您轻松体验React Native的强大功能 。 它是完全开源的，因此您没有理由等待。 继续尝试，并让我们知道您的评论。

Also, stay updated with the progress by following the NativeBase.io blog, Twitter handle and subscribing on the website.

另外，通过关注NativeBase.io博客 ， Twitter处理和在网站上订阅，可以随时了解进度。

This post was sponsored by NativeBase through Syndicate.

这篇文章是由NativeBase通过Syndicate赞助的。

翻译自: https://scotch.io/tutorials/nativebase-the-missing-piece-of-react-native