从“React”中导入React;
从' react-native'中导入{View, Text, Alert};

HelloThere类扩展React.Component {
  clickMe() {
    Alert.alert(‘hi!');
  }
  render() {
    return (
      Hello {this.props.name}. 请点击我.
    );
  }
}

React.render(, document.getElementById(“内容”));

元素，在原生世界中文本不能直接放在 . 为此，我们需要插入a component.

从“React”中导入React;
从' react-native'中导入{View, Text, Alert};

HelloThere类扩展React.Component {
  clickMe() {
    Alert.alert(‘hi!');
  }
  render() {
    return (
      
        Hello {this.props.name}. 请点击我.
      
    );
  }
}

React.render(, document.getElementById(“内容”));

步骤3:内联样式是最好的选择

React Native允许我们使用Flexbox建模，而不是乱用 float and inline-block 我们在网络世界中非常熟悉. 有趣的是，React Native不使用CSS.

从“React”中导入React;
import {View, Text, StyleSheet, Alert} from ' react-native';

HelloThere类扩展React.Component {
  clickMe() {
    Alert.alert(‘hi!');
  }
  render() {
    return (
      
        Hello {this.props.name}. 请点击我.
      
    );
  }
}

var styles =样式表.create({
  box: {
    borderColor:“红”,
    写成backgroundColor:“# fff ',
    borderWidth: 1、
    padding: 10,
    width: 100,
    height: 100
  }
});

React.render(, document.getElementById(“内容”));

对于初学者来说，使用内联样式似乎令人困惑. 这类似于React开发人员在面对JSX和之前使用Handlebars或Jade等模板引擎时所经历的转变.

我们的想法是，在使用CSS的方式中，我们没有全局的样式表. 我们直接在组件级别声明样式表, 这样我们就有了所有我们需要的信息来看看我们的组件是做什么的, 它创建的布局, 以及它所应用的样式.

从“React”中导入React;
从' react-native'中导入{Text};

var标题= function(props) {
  this.render = () => {props.caption};
};

var headlinestyle =样式表.create({
  text: {
    fontSize: 32,
    fontWeight:“大胆”
  }
});

module.exports =标题;

步骤4:处理事件

在移动设备上点击一个元素，相当于在网页上点击. 让我们修改一下代码，以便在点击元素时弹出“alert”.

从“React”中导入React;
从' react-native'中导入{View, Text, StyleSheet, touchableacity, Alert};

HelloThere类扩展React.Component {
  clickMe() {
    Alert.alert("Hi!")
  }
  render() {
    return (
      
        
          Hello {this.props.name}. 请点击我.
        
      
    );
  }
}

var styles =样式表.create({
  box: {
    borderColor:“红”,
    写成backgroundColor:“# fff ',
    borderWidth: 1、
    padding: 10,
    width: 100,
    height: 100
  }
});

React.render(, document.getElementById(“内容”));

而不是直接在 components, 我们需要显式地使用触发事件的元素, 在我们的例子中，按下视图时的触摸事件. 有不同类型的可触摸组件可用, 每一个都提供了不同的视觉反馈.

步骤5:定制跨平台行为

的值可以检测应用程序运行在哪个平台上 Platform.OS. Let’s say that, 在上面的React Native代码示例中, 我们希望根据我们运行的平台显示不同的警报消息. 我们可以这样做:

...
clickMe() {
  Var message = ";
  if(Platform.OS == ‘ios') {
    message =‘欢迎来到iOS!';
  } else if(平台.OS == ' android') {
    欢迎使用Android!';
  }   
  Alert.警报(消息);
}
...

或者, select 方法也可用，它提供了一个类似开关的语法:

…
clickMe() {
  Alert.alert(Platform.select({
    ios:欢迎来到ios!',
    android:欢迎来到android!'
  })
  );
}
...

步骤6:自定义字体和 react-native链接

为了添加自定义字体，我们需要克服一些困难. First of all, 确保字体的全名和字体的文件名相同:iOS将使用字体的全名来挑选字体, 而Android使用文件名.

如果字体的全名是 myCustomFont，确保字体的文件名为 myCustomFont.ttf.

之后，我们需要创建一个assets文件夹，并把npm指向它. 我们可以先创建文件夹，在 assets/fonts 在应用程序的根目录中. 任何其他目录都可以，但这是用于字体目录的常规名称.

我们可以通过添加an来告诉npm我们的资源在哪里 Assets 属性rnpm:

"rnpm": {
  "Assets": [
    "./ /字体/资产”
  ]
}

做完这些之后，我们终于可以跑了 react-native链接. 这将复制字体到正确的目录，并将必要的xml添加到info.plist on iOS.

完成后，我们可以通过在任何样式表中引用字体的全名来使用字体. 我们用它 Text element:

从“React”中导入React;
从' react-native'中导入{View, Text, StyleSheet, touchableacity, Alert};

HelloThere类扩展React.Component {
  clickMe() {
    Alert.alert("Hi!")
  }
  render() {
    return (
      
        
          Hello {this.props.name}. 请点击我.
        
      
    );
  }
}

var styles =样式表.create({
  box: {
    borderColor:“红”,
    写成backgroundColor:“# fff ',
    borderWidth: 1、
    padding: 10,
    width: 100,
    height: 100
  },
  message: {
    fontFamily:“myCustomFont”
  }
});

React.render(, document.getElementById(“内容”));

第七步:移动物品

React Native使用与Flexbox相同的规则来布局组件. 假设我们想要将按钮定位在屏幕的底部:让我们包装我们的 TouchableOpacity 用一个容器 View:

    
        
            Hello {this.props.name}. 请点击我.
        
    

现在我们来定义 container 样式，连同其他已定义的样式:

container: {
    flex: 1,
    justifyContent:“中心”,
    alignItems:“中心”
  }

Let’s focus on justifyContent and alignItems. 这两个属性分别控制组件沿其主轴和副轴的对齐方式. By default, 主轴是垂直的, 副轴是水平轴(你可以通过设置 flexDirection property to row).

justifyContent 有六个可能的值可以设置为:

• flex-start 将所有的元素放在一起，在组件的边界框的开始.
• flex-end 将所有元素放置在最后.
• center 是否将所有元素放置在边界框的中心.
• space-around 将组件均匀分布，并将组件置于其创建的边界框的中心.
• space-evenly 也会均匀地散布这些成分吗, 但它会尝试在分量和其他边界之间留下等量的空间.
• space-between 将通过保持相邻分量之间的间距相等来展开分量吗.

alignItems 可以设置为四个可能的值: flex-start, flex-end, center, and stretch. 前三个的行为就像 justifyContent, while stretch 是否将组件设置为占用沿轴的所有可用空间, 这样轴就被填满了.

既然我们想要 TouchableOpacity 显示在底部并沿水平轴居中, 我们可以像这样改变样式:

container: {
  flex: 1,
  justifyContent:“flex-end”,
  alignItems:“中心”
}

有关值的更多信息 justifyContent and alignItems 能有能找吗 here and here.

步骤8:注册应用程序

当使用React为浏览器开发时，我们只需要定义一个挂载点，调用 React.render，让React发挥它的魔力. 在React Native中，这有点不同.

从“React”中导入React;
import {View, Text, StyleSheet, touchableacity, Alert, Platform} from ' react-native';

HelloThere类扩展React.Component {
  clickMe() {
    Alert.alert(Platform.select({
      ios:欢迎来到ios!',
      android:欢迎来到android!'
    }));
  }

  render() {
    return (
      
        
          
            Hello {this.props.name}. 请点击我.
          
        
      
    );
  }
}

var styles =样式表.create({
  container: {
    flex: 1,
    justifyContent:“flex-start”,
    alignItems:“中心”
  },
  box: {
    borderColor:“红”,
    写成backgroundColor:“# fff ',
    borderWidth: 1、
    padding: 10,
    width: 100,
    height: 100
  },
  message: {
    fontFamily:“myCustomFont”
  }
});

var MainComponent = function() {
  this.Render = function() {
    return ;
  }
};

AppRegistry.registerComponent('MainComponent'， function() {
  返回MainComponent;
});

我们必须为Objective-C方面的东西注册组件，这是使用 AppRegistry object. 我们给出的名称必须与Xcode项目中的名称相匹配.

我们的Hello World React Native应用程序比web应用程序的代码行数要多得多, 但另一方面, React Native在关注点分离方面更进一步, 特别是因为样式是与组件一起定义的.

顺便说一句，我们不应该重新绑定 clickMe method to the this context in the render 方法，特别是当我们的React (Native)应用程序变得更复杂时. 它在每个渲染调用上重新绑定方法，这可能会变得相当多. 另一种方法是在构造函数中绑定方法.

运行应用程序

要运行应用程序，我们需要替换 index.ios.js 文件中包含上一步转换后的应用程序的代码片段. 然后我们只需要打开Xcode项目并按下Run按钮. 首先，将打开带有React Native服务器的终端，然后将出现模拟器窗口. React Native服务器创建一个bundle，然后本地应用程序将获取它. 这允许类似于web开发的快速开发周期, 哪些改动会在模拟器中立即反映出来.

对于Android，只需在你的 package.json file, under scripts:

react-native包——platform android——dev false——entry-file index.ios.——bundle-output android / app / src / main /资产/index.android.Bundle——assets-dest android/app/src/
main/res && react-native运行android”

And then run NPM运行android-linux. Make sure the android / app / src / main /资产 事先存在目录.

在终端弹出后，我们的应用程序将显示在模拟器中. 按CMD+D将显示一个开发菜单. 然后单击该框将显示一个警告. iOS版本:

Android呈现的是这样的:

对分布, 拥有一个指向本地开发服务器的应用程序对我们来说是行不通的. 出于这个原因, 当React Native服务器没有运行该命令时，我们可以创建bundle来使用 react-native包. 在这种情况下，我们需要更新 didFinishLaunchingWithOptions method of AppDelegate 使用脱机包.

这个示例应用程序也是 可以在Github上找到.

使用React Native

另一件值得一提的事情是，我们不仅在移动应用程序中使用React概念和JavaScript, 但是web开发人员习惯的一些工作流也可以在React Native中使用. 当来自于web开发时, 我们已经习惯了开发人员工具, 检查元素, 实时装填.

React Native的工作方式是把我们所有的JavaScript文件放在一个bundle中. 该包要么从服务器提供，要么与应用程序捆绑在一起. 第一个对于在模拟器中开发非常有用，因为我们可以启用实时重新加载. React提供的开发者菜单远不如Chrome开发者工具强大, 但它提供了一个非常像web的开发者体验，实时重新加载和 debugging 使用Chrome(或Safari)开发/调试工具.

Web开发人员熟悉JSFiddle或JSBin，这是一个用于快速Web测试的在线平台. There is 相似的环境 它允许我们在web浏览器中试用React Native.

React Native:一个可靠的、现代的选择

我最初建议采用一种更谨慎的方法来使用React Native. 今天，这是一个成熟而坚实的选择.

React的一大优点是它不会对你的工作流程产生影响, 因为它只代表视图层. 您想定义自己的Grunt管道吗? 或者你更愿意使用Webpack? 你会使用Backbone吗.为您的模型需要? 或者您想要使用纯JavaScript对象? 所有这些问题的答案完全取决于你, 因为React对这些选择没有任何限制. 正如官方网站所说:“因为React对你的技术栈的其余部分没有任何假设, 在现有项目中的一个小特性上进行测试是很容易的.”

在某种程度上，React Native也是如此. 移动开发者可以将React Native集成到他们的应用中, 利用受web启发的开发工作流程, 如果需要的话，选择在更大的范围内整合图书馆.

无论如何，有一件事是肯定的: React Native不会消失. Facebook在应用商店中拥有多款基于React native的应用，这对Facebook来说意义重大. React Native的社区非常庞大，而且还在不断增长.