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 <Text>Hello, Navigation!</Text>;
  }
}

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 (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

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

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

我们使用屏幕导航属性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 (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

我们可以在他的下级界面中得到参数 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 (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

进阶,修改导航条的样式

我们这么修改

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:( // 设置左边的标签
            <TouchableOpacity onPress={()=>{navigation.goBack()}}>
                <View style={{flexDirection:'row',alignItems:'center',marginLeft:5}}>
                    <Image style={{height: 18,width:10,marginRight:5}} source={{uri:'back'}}/>
                    <Text style={{color: '#999',fontSize:15}}>返回</Text>
                </View>

            </TouchableOpacity>
        ),
        headerRight:( // 设置右边的标签
            <TouchableOpacity onPress={()=>{navigation.goBack()}}>
                <View style={{flexDirection:'row',alignItems:'center',marginRight:8}}>
                    <Image style={{height: 18,width:18,resizeMode:'contain'}} source={{uri:'new_del'}}/>
                </View>

            </TouchableOpacity>
        ),
        headerTitle:(//设置头部标签
            <TouchableOpacity onPress={()=>{navigation.goBack()}}>
                <View style={{flexDirection:'row',alignItems:'center',marginRight:8}}>
                    <Image style={{height: 40,width:40,resizeMode:'contain'}} source={{uri:'znb 2'}}/>
                </View>

            </TouchableOpacity>
        )



    });