在标题栏增加按钮
与标题交互的最常用方法是点击标题左侧或右侧的按钮。 让我们在标题的右侧添加一个按钮（在整个屏幕上最难触摸的地方之一，取决于手指和手机大小，但也是放置按钮的正常位置）。
1
2
3
4
5
6
7
8
9
10
11
12
| class HomeScreen extends React.Component {
static navigationOptions = {
headerTitle: <LogoTitle />,
headerRight: (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
};
}
|
标题栏与屏幕组件的交互
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: <LogoTitle />,
headerRight: (
<Button
onPress={navigation.getParam('increaseCount')}
title="+1"
color="#fff"
/>
),
};
};
componentDidMount() {
this.props.navigation.setParams({ increaseCount: this._increaseCount });
}
state = {
count: 0,
};
_increaseCount = () => {
this.setState({ count: this.state.count + 1 });
};
/* later in the render function we display the count */
}
|
自定义返回按钮
createStackNavigator为后退按钮提供特定于平台的默认值。 在iOS上，默认会在按钮旁边显示一行文字，当有足够的空间放置时直接显示上一屏幕的标题，否则显示“Back”。
您可以通过headerBackTitle和headerTruncatedBackTitle属性来更改更改该文字。
假如要自定义后退按钮图像，可以使用headerBackImage属性。
覆盖返回按钮
只要用户可以从当前屏幕返回上一级，后退按钮将自动呈现在堆栈导航器中 - 换句话说，只要堆栈中有多个屏幕，就会呈现后退按钮。
一般来说，这就是满足我们的需求了。 但是在某些情况下，您可能自定义后退按钮来修改这种模式，在这种情况下，您可以将headerLeft选项设置为想要呈现的React元素，就像我们使用headerRight一样。 或者，headerLeft选项也接受React Component，例如，可重写后退按钮的onPress事件。
