react-native从入门到精通搭建app(六) 一一 头部标题栏设置

五、react-native头部标题栏设置

1.设置标题

屏幕组件可以具有静态属性navigationOptions,该属性称为对象或返回包含各种配置选项的对象的函数。我们用于标题标题的那个是title,如以下示例所示。

HomeScreen主组件

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };
  /* render function, etc */}

DetailsScreen详情组件

class DetailsScreen extends React.Component {
  static navigationOptions = {
    title: 'Details',
  };
  /* render function, etc */}

在navigation.getParam或navigation.state.params后者我们自行查看学习,我们教程前者介绍,

为了在标题中使用params,我们需要创建navigationOptions一个返回配置对象的函数。尝试在this.props内部使用可能很诱人navigationOptions,但因为它是组件的静态属性,this所以不引用组件的实例,因此没有可用的道具。相反,如果我们创建navigationOptions一个函数,那么React Navigation将使用包含的对象调用它{ navigation, navigationOptions, screenProps }- 在这种情况下,我们关心的是navigation,这是传递给屏幕道具的相同对象this.props.navigation通过navigation.getParam获取参数修改title。

DetailsScreen详情组件

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  };
  /* render function, etc */}

在上一篇我们也介绍了动态修改参数内容,更新navigationOptions与setParams通过点击按钮修改设置的标题

<Button
  title="Update the title"
  onPress={() => this.props.navigation.setParams({ otherParam: 'Updated!' })}/>

2.设置标题样式

有自定义页眉的样式时,使用三个关键特性:headerStyle,headerTintColor,和headerTitleStyle。

headerStyle:将应用于View包装标头的样式对象。如果你设置backgroundColor它,那将是你的标题的颜色。

headerTintColor:后退按钮和标题都使用此属性作为其颜色。在下面的示例中,我们将色调颜色设置为白色(#fff),因此后退按钮和标题标题将为白色。

headerTitleStyle:如果我们想自定义fontFamily,fontWeight等Text为标题样式属性,我们可以用它来做到这一点。

HomeScreen主组件

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };
  /* render function, etc */}

效果如下

image.png

3.多屏公用样式

通常希望在许多屏幕上以类似的方式配置标头。

DetailsScreen详情组件

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };
}
const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  });

效果如下

image.png

4.动态设置标题样式

屏幕组件定义与其父堆栈导航的默认导航选项合并到一起,达到动态修改继承父页面标题样式

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state;
    return {
      title: params ? params.otherParam : 'A Nested Details Screen',
      headerStyle: {
        backgroundColor: navigationOptions.headerTintColor,
      },
      headerTintColor: navigationOptions.headerStyle.backgroundColor,
    };
  };

效果如图

jdfw.gif

4.自定义组件替换标题样式

有时您需要更多控制而不仅仅是更改标题的文本和样式 - 例如,您可能希望渲染图像代替标题,或将标题设置为按钮。在这些情况下,您可以完全覆盖用于标题的组件并提供您自己的组件。

要替换的标题组件

LogoTitle组件

class LogoTitle extends React.Component {
  render() {
    return (
      <Image
        source={require('./src/assets/title.png')}
        style={{ width: '100%', height: '100%' }}
      />
    );
  }
}

HomeScreen主组件

class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    headerTitle: <LogoTitle />,
  };
  /* render function, etc */}

效果如下:

image.png

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页