头部按钮
- 通过headerLeft和headerRight来添加左右按钮
class HomeScreen extends React.Component {
static navigationOptions = ({navigation})=>{
return {
// title: 'Home',
headerTitle:<LogoTitle/>,
// 同时添加左右键 保证居中
headerLeft:(
<Button onPress={()=>navigation.goBack()}
title ="Back"
color = "#000" />
),
// 添加一个右键
headerRight:(
<Button onPress={()=> alert('just test')}
title ="info"
color = "#839"
/>
),
......下略
在navigationOptions，this指向的不是HomeScreen，所以不能用this来调用。
用自定义的按钮连接goBack方法，可以处理默认返回键返回很慢的问题。
- js中的 || 运算
前面看到一个获取参数的例子是这样的
// 函数传入一个navigation，获取state，设置title
static navigationOptions = ({navigation,navigationOptions}) =>{
const {params} = navigation.state;
return {
title:params?params.msg:'A Details Screen',
}
};
在将头部按钮时，官方又给了一个这样的例子
const params = navigation.state.params || {};
查了下，js中表示，navigation.state.params不为空则赋值，否则使用后面的值赋值。和java的短路或不太一样。
RN不能保证你的screen组件的挂载会优先于你的header，所以params可能为{};
可以通过Redux或者Mobx来实现header和screen的交互
- 自定义返回按钮
headerBackTitle IOS 有效
headerTruncatedBackTitle 似乎安卓无效
headerBackImage 注意背景色不要覆盖，否则只能看到色块 。
通过设置headerLeft可以覆盖默认返回按钮
Opening a full-screen modal(全屏模态展示)
modal
A modal displays content that temporarily blocks interactions with the main view（临时地阻止与主屏幕的交互，这种展示形式成为模态展示）建立一个模态页面
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
const params = navigation.state.params || {};
return {
headerLeft: (
<Button
onPress={() => navigation.navigate('MyModal')}
title="Info"
color="#fff"
/>
),
/* the rest of this config is unchanged */
};
};
/* render function, etc */
}
class ModalScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 30 }}>This is a modal!</Text>
<Button
onPress={() => this.props.navigation.goBack()}
title="Dismiss"
/>
</View>
);
}
}
const MainStack = StackNavigator(
{
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
},
{
/* Same configuration as before */
}
);
const RootStack = StackNavigator(
{
Main: {
screen: MainStack,// 这个有导航栏
},
MyModal: {
screen: ModalScreen, // 这个没有导航栏
},
},
{
mode: 'modal',
headerMode: 'none',// 设置模式 不加Main会有两个导航栏
}
);
这里实现了两个StackNavigator的嵌套，一个栈是有导航栏的，一个栈是没有的。
模式配置可以是card或者modal，这个对安卓没有影响，只影响ios上的转换效果(modal时从下到上，card是从右到左)
在导航时不需要指定所在的栈，只需要指定页面名称。官方提供了这样一张图。从HOME导航到modal，如果mainstack不能处理，会交给rootstack来处理。
tree.png
其他
- StackNavigator不能实现图表式的切换，需要使用TabNavigator。这里先不提，参见TabNavigator
- 想要了解内部机理参见Build your own Navigator
- 其他API参见API Reference
