React-native开发系列（一）---NavigatorIOS应用

最新推荐文章于 2019-02-18 14:41:00 发布

鹏鹏_peng

最新推荐文章于 2019-02-18 14:41:00 发布

阅读量987

点赞数

分类专栏： React-Native 文章标签： RN开发-RN导航

本文链接：https://blog.csdn.net/u010464084/article/details/51648116

版权

React-Native 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

看了好多教程，真的头大呀！不是写的很繁琐就是直接照搬Facebook的代码，看着真够头大的，还是直接上代码吧！

你的第一个文件，引入NavigatorIOS（相当于navigationController）

import React, { Component } from 'react';
var SearchScreen = require ('./SearchScreen');//导入你写的rootviewcontroller。
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NavigatorIOS,
} from 'react-native';

class NavigatorDemo extends Component {
  render() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          title:'movies',//这是navigationController的title。
          component:SearchScreen,//注释：这里是要写的是相当于iOS开发里navigationController的rootViewController页面。
        }}
      />

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
});
AppRegistry.registerComponent('NavigatorDemo', () => NavigatorDemo);

这里是你的rootviewcontroller。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
class SearchScreen extends Component{
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>131231232
        </Text>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    top:64,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
module.exports = SearchScreen;