React-native之StackNavigator

让我们来用 React Navigation 创建一个简单的跨平台(Android and iOS)的应用

Setup and Installation

首先,确保你已经安装好了RN所需的环境
其次,创建一个新的项目,添加react-navigation

# Create a new React Native App
react-native init SimpleApp
cd SimpleApp

# Install the latest version of react-navigation from npm
npm install --save react-navigation

# Run the new app
react-native run-android # or:
react-native run-ios

确认你已经成功看到RN的欢迎界面

Snip20170814_2.png

接下来我们看下 Stack Navigator 的简单用法

import React from 'react';
import {
  AppRegistry,
  Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return Hello, Navigation!;
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
});

AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

当前控制器的title我们可以在navigationOptions中设置,其实title不仅仅可以使用文字,我们还可以自定义组件显示,接着往下看

创建一个新的界面,实现跳转

class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      
        Chat with Lucy
      
    );
  }
}

我们可以在HomeScreen组件中添加一个button ,当点击button的时候使用routeName Chat来跳转到ChatScreen,

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      
        Hello, Chat App!
         navigate('Chat')}
          title="Chat with Lucy"
        />
      
    );
  }
}

我们使用屏幕导航属性navigate函数来跳转到ChatScreen
我们在 HomeScreen 组件下加上以下代码就可以实现跳转了

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});

传递参数

我们可以在navigate中传递参数

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      
        Hello, Chat App!
         navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      
    );
  }
}

我们可以在他的下级界面中得到参数 navigationOptions

class ChatScreen extends React.Component {
  // Nav options can be defined as a function of the screen's props:
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    return (
      
        Chat with {params.user}
      
    );
  }
}

进阶,修改导航条的样式

我们这么修改

static navigationOptions = {
        title:'商家后台',
        headerStyle:{
            backgroundColor:'#00a0e9'
        },
        headerTintColor:'white',
    }

效果看起来是这样的(注意导航条)

Simulator Screen Shot 2017年8月14日 18.13.42.png

对于这样的效果我们可以这么设置

Simulator Screen Shot 2017年8月14日 18.52.49.png

 static navigationOptions = ({navigation}) => ({
        title : '收藏的商家',
        headerStyle:{
            backgroundColor:'white'
        },
        
        headerBackTitleStyle:{
            color:'#666666',

        },

        headerLeft:( // 设置左边的标签
            {navigation.goBack()}}>
                
                    
                    返回
                

            
        ),
        headerRight:( // 设置右边的标签
            {navigation.goBack()}}>
                
                    
                

            
        ),
        headerTitle:(//设置头部标签
            {navigation.goBack()}}>
                
                    
                

            
        )



    });