React Native 二:快速入门

最新推荐文章于 2026-06-28 09:26:32 发布

原创

最新推荐文章于 2026-06-28 09:26:32 发布 · 8.8k 阅读

收录于

当前文章被以下社区和专栏收录：

本文以Android为例，介绍React Native的快速入门，包括修改index.android.js文件，展示Mock数据，添加样式，获取真实数据，以及使用ListView展示列表。通过逐步操作，展示了如何创建并渲染React Native应用。

前面我们使用react-native init创建了一个项目，这是一个简单的Hello World App（项目结构如下图）。对于iOS来说，你需要编辑index.ios.js来改变App；对于Android，你需要编辑index.android.js来修改App。然后摇晃菜单中点击Road JS查看改变。下面我们就以Android为例子来尝试修改了App。

一、修改index.android.js文件

index.android.js文件：

//Mock数据
var MOCKED_MOVIES_DATA = [
  {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
//导入React-Native相关组件
import React, {
  AppRegistry,
  Component,
  Image,
  StyleSheet,
  Text,
  View,
} from 'react-native';
//创建AwesomeProject组件类
class AwesomeProject extends Component {
  //使用Mock数据，通过Html渲染组件 
  render() {
    var movie = MOCKED_MOVIES_DATA[0];
    return (
      <View style={styles.container}>
        <Text>{movie.title}</Text>
        <Text>{movie.year}</Text>
        <Image source={
   
   {uri: movie.posters.thumbnail}} style={styles.thumbnail}/>
      </View>
    );
  }
}
//渲染组件的样式
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
});
//注册创建的AwesomeProject组件类
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);</

标签