react-navigation(基础学习）(二）

一、标题栏头部按钮

在标题栏头部右侧添加一个按钮：headerRight

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        color="#fff"
      />
    ),
  };
}

　　

标题栏头部按钮与页面的互动：还是要通过传递参数的方式进行：

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 });
  };

　　定制返回按钮：可以使用

headerBackTitle 和headerTruncatedBackTitle 属性，设置返回按钮图片可以使用：headerBackImage按钮。

重写返回按钮：

如果不希望返回按钮返回默认的上一个页面，而是返回特定的组件页面，也可以重写headerLeft,并重写onPress方法。

二、模态对话框

创建一个模态对话框：

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 = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    /* Same configuration as before */
  }
);

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainStack,
    },
    MyModal: {
      screen: ModalScreen,
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
);

　　步骤(1)：创建一个组件，ModalScreen，(2)在根目录RootStack将所有的screen设置为不含头部的莫泰对话框属性；（3）Main路径中包含原先创建的Main和Details路径及对应的screen，Main和Details是设置了头部标题栏的screen，这将覆盖RootStack中无标题头的设置。（4）在Home路径对应的screen中创建导航至Modal,Home路径将找到Main路径，Main路径将找到Root路径，Root路径将找到Modal路径。