【翻译】React Navigation/NavigationP

2017-05-13 本文已影响362人 nimw

App.js - StackNavigator路由栈

StyleSheet定义最细的线

//这一常量定义了当前平台上的最细的宽度。可以用作边框或是两个元素间的分隔线。
StyleSheet.hairlineWidth

StackNavigator方法参数

const AppNavigator = StackNavigator({
  ...ExampleRoutes,
  Index: {
    screen: MainScreen,
  },
}, {
  //初始页面: 如果不设置该项，则显示位置在第一个的页面组件（SimpleStack）。
  initialRouteName: 'Index',
    //头部什么时候重新渲染：
    //float: 只有一个head头部，页面切换的时候有动画，ios里常用。
    //screen: 每一个屏幕都有一个头部，安卓里常用。
    //none: 不渲染head头部(该AppNavigator路由就没有头部)
  headerMode: 'none',
    // 路由切换动画
    // card: 使用安卓ios默认切换方式。ios-左滑动出现，android-向上渐变。
    // modal: 从屏幕底部向上弹出，只在ios上生效。
  mode: Platform.OS === 'ios' ? 'modal' : 'card',
});

遍历对象

//routeName表示key值
Object.keys(ExampleRoutes).map(
     (routeName: string) =>{
                //Todo
      }

SimpleStack.js - StackNavigator路由栈

ES6中的变量与字符串的拼接方法

//``内部防止字符串和变量
//${}内放变量，${}外放字符串
//变量与变量之间没有连接符（${}${}）；字符串与变量之间（${}字符串）没有连接符
   `${params.name}'s Profile!`;
`${navigation.state.params.name}'s Photos`;
//可以换行
`${navigation.state.params.mode === 'edit' ? 'Now Editing ' : '' }${navigation.state.params.name}'s Profile`

使用navigate方法可以推入哪些路由页面。

AppNavigator  = StackNavigator (
      A: {screen: A}, 
      B: {screen: B}
)
B = StackNavigator({
       B1 : {screen: B1},
       B2: {screen: B2},
       B3: {screen: B3}
});

分析： ①同一级路由页面之间可以使用navigator方法跳转： A、B之间；B1、B2、B3之间。②不同级路由之间可以相互跳转（不推荐这样使用），A可以直接跳转到B1、B2、B3；B1、B2、B3可以直接跳转到A。
注意： A.navigator(B) 与A.navigator(B1)的对比：因为B路由栈的初始路由页面是B1，所以两者都是显示B1页面；但是前者是A-B1的过程，而后者是A-B1-B1的过程。

navigation.goBack(null) 返回到哪里
不管有多层嵌套，navigation.goBack(null)都返回加载此页面的地方。
即： navigation.goBack(null)既有可能返回到当前路由栈的上一个页面，又可能返回多上一级路由栈。
一个路由栈嵌套在另一个路由栈中，父路由栈展示子路由栈的时候如何隐藏头部

//SimpleStack路由栈嵌套在AppNavigator路由栈中
//设置AppNavigator展示SimpleStack时无header头部。
//SimpleStack.navigationOptions这种写法与static navigationOptions写法对比
SimpleStack.navigationOptions = {
    header: null
};

React无状态组件特点

不需要声明类，可以避免大量的譬如extends或者constructor这样的代码；
不需要显示声明this关键字，可以不用绑定this；
支持设置默认的Props类型与值；
可以访问Prop和Context的

const Text = (props, context) =>
        <p style={context}>props.children</p>;
Text.contextTypes = {
       fontFamily: React.PropTypes.string
};
Text.propTypes = { children: React.PropTypes.string };
Text.defaultProps = { children: 'Hello World!' };
class App extends React.Component {
  static childContextTypes = {
        fontFamily: React.PropTypes.string
  }
  getChildContext() {
         return {
           fontFamily: 'Helvetica Neue'
         };
   }
  render() {
         return <Text>Hello World</Text>;
  }
}

注意：我们会使用函数式无状态组件，除非需要本地 state 或生命周期函数的场景。无状态组件输出方式完全取决于两个参数。
扩展: Context，React中隐藏的秘密！

SimpleTabs.js - TabNavigator路由栈

如何设置TabNavigator的被选中tab的颜色

const SimpleTabs = TabNavigator({
      Home: {screen: MyHomeScreen},
      People: {screen: MyPeopleScreen},
      Chat: {screen: MyChatScreen},
      Settings: {screen: MySettingsScreen}
    }, {
      tabBarOptions: {
          //被选中tab的tintColor颜色值
          activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
      },
      //tab在页面的顶部（top）还是底部（bottom）
      tabBarPosition: 'bottom',
      //是否有切换动画
      animationEnabled: true,
      //是否可以手指滑动切换
      swipeEnabled: true,
});

如何配置每一个tab的一些信息

MySettingsScreen.navigationOptions = {
        //设置tab文字
      tabBarLabel: 'Settings',
        //设置tab图标
      tabBarIcon: ({ tintColor, focused }) => (
        //tintyColor在被选中时和未被选中时颜色值不同
        //focused是一个是否被选中的布尔值
        <Ionicons
            name={focused ? 'ios-settings' : 'ios-settings-outline'}
            size={26}
            style={{ color: tintColor }}
        />
      ),
};

Drawer.js - DrawerNavigator

DrawerNavigator方法

const DrawerExample = DrawerNavigator({
      Inbox: {screen: InboxScreen},
      Drafts: {screen: DraftsScreen},
  }, {
      //初始展示项
      initialRouteName: 'Drafts',
      contentOptions: {
        //被选中drawer的tintColor颜色值
        activeTintColor: '#e91e63'
  },
});

DraftScreen组件

const DraftsScreen = ({ navigation }) => (
      <MyNavScreen
        banner={'Drafts Screen'}
        navigation={navigation}
      />
);
DraftsScreen.navigationOptions = {
      //drawer显示的文字
      drawerLabel: 'Drafts',
      drawerIcon: ({ tintColor }) => (
      //tintColor在被选中和未被选中时的颜色不同。
          <MaterialIcons
            name="drafts"
            size={24}
            style={{ color: tintColor }}
        />
    ),
};

MyNavScreen组件

const MyNavScreen = ({ navigation, banner }) => (
      <ScrollView style={styles.container}>
        <SampleText>{banner}</SampleText>
        <Button
          //注意：打开drawer的方法
          onPress={() => navigation.navigate('DrawerOpen')}
          title="Open drawer"
        />
        <Button
          onPress={() => navigation.goBack(null)}
          title="Go back"
        />
      </ScrollView>
);

其他

StackNavigator隐藏header的两种写法的对比

//写法一
const ProfileNavigator = StackNavigator({
        Home: {screen: MyHomeScreen},
        Profile: {screen: MyProfileScreen},
}, {
        //内外层header都不渲染
        navigationOptions: {header: null}
});
//写法二
const ProfileNavigator = StackNavigator({
        Home: { screen: MyHomeScreen},
        Profile: {screen: MyProfileScreen},
}, {
        //内层header不渲染
        headerMode: 'none' 
});
//写法三
ProfileNavigator.navigationOptions = {
        //外层不渲染
        header: null
}

**写法一： ** 设置MyHomeScreen和MyProfileScreen路由页面没有头部。设置的是内层和外层路由页面都没有头部。优先级低于在MyHomeScreen和MyProfileScreen通过 static navigationOptions方法设置。
**写法二： ** 设置MyHomeScreen和MyProfileScreen路由页面没有头部。设置的只是内层路由页面没有头部。
写法三： 表示ProfileNavigator作为一个外层路由页面时没有头部。
引申： note this changed starting beta9

Before:
        { header: { visible: false, }}
Now:
        { header: null,}

【翻译】React Navigation/NavigationP

App.js - StackNavigator路由栈

SimpleStack.js - StackNavigator路由栈

SimpleTabs.js - TabNavigator路由栈

Drawer.js - DrawerNavigator

其他

猜你喜欢

热点阅读