多行 header - React Native

Question

我有一个 React Native 应用程序。
我想在我的 header 下方添加一个字幕。

像这样的东西

Header 代码：

static navigationOptions = ({ navigation }) => {

  return {
      title: localizedTitle(),
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor: isUndercareMode() ? getUndercareColor() : 'rgb(255,0,0)'
      },
      headerTitleStyle: { 
        fontWeight: 'bold',
        textAlign: 'center',
        fontSize: normalizeFontSize(18),
        flex: 1
      },
      headerLeft: <BackButton
                    accessible={false}
                    testID='LeftButton'
                    accessibilityLabel="headerLeftButton"
                    />,
                    
      headerRight: (<View></View>),
    }
  }

如何实现这个多行 header？

更新：
我尝试了两种方法，但都非常令人沮丧。

第一种方法：
后退按钮和用户详细信息未对齐。 后退按钮向上移动。

static navigationOptions = ({ navigation }) => {
  return {
      title: localizedTitle(),
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor: HAGo_isUndercareMode() ? HAGo_getUndercareColor() : 'rgb(255,0,0)'
      },
      headerTitleStyle: { 
        fontWeight: 'bold',
        textAlign: 'center',
        fontSize: normalizeFontSize(18),
        flex: 1
      },
      headerLeft: (
                  <View>
                   <HAGo_BackButton
                    accessible={false}
                    testID='LeftButton'
                    accessibilityLabel="headerLeftButton"
                    /> 
                    { 
                    HAGo_isUndercareMode() ?
                    <View >
                    <View style={{flexDirection: 'row',  backgroundColor:'#008A20', width:500, alignItems:'center'}}>
                    <Image style={{ width:40, height:40, marginRight:15}} source={require('../HAGo/default_userIcon.png')} />
                    <Text style={{fontSize: normalizeFontSize(18), color:'#fff'}}>{getUndercareName()}</Text>
                    </View>
                    </View>
                    : null
                     }
                  </View>
                  ),
      headerRight: (<View></View>),
    }
  }

方法二：
无法将它们对齐到左侧。

 static navigationOptions = ({ navigation }) => {

    return {
        headerTitle: () =>
          <View>
              <Text style={{color: '#fff', fontSize:normalizeFontSize(18), fontWeight:'bold'}} >{localizedTitle()}</Text>
              <View style={{flexDirection: 'row', justifyContent: 'flex-start'}}>
              <Image style={{ width:40, height:40, marginRight:15}} source={require('../HAGo/default_userIcon.png')} />
              <Text style={{fontSize: normalizeFontSize(18), color:'#fff'}}>{getUndercareName()}</Text>
              </View>
          </View>,
        headerTintColor: '#fff',
        headerStyle: {
          backgroundColor: HAGo_isUndercareMode() ? HAGo_getUndercareColor() : 'rgb(255,0,0)'
        },
        headerTitleStyle: { 
          fontWeight: 'bold',
          textAlign: 'center',
          fontSize: normalizeFontSize(18),
          flex: 1
        },
        headerLeft: <HAGo_BackButton
                      accessible={false}
                      testID='LeftButton'
                      accessibilityLabel="headerLeftButton"
                      />,
                      
        headerRight: (<View></View>),
      }
    }

哪种方法有意义？？ 请帮忙。

第二次更新：

static navigationOptions = ({ navigation }) => {
  return {
      title: localizedTitle(),
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor: isUndercareMode() ? getUndercareColor() : 'rgb(255,0,0)'
      },
      headerTitleStyle: { 
        fontWeight: 'bold',
        textAlign: 'center',
        fontSize: normalizeFontSize(18),
        flex: 1
      },
      headerLeft: (
                  <View>
                    <View style={{paddingTop: isUndercareMode() ? 45 : 0}} >
                   <BackButton
                    accessible={false}
                    testID='LeftButton'
                    accessibilityLabel="headerLeftButton"
                    /> 
                    </View>
                    { 
                    isUndercareMode() ?
                    <Undercare />
                    : null
                     }
                  </View>
                  ),
      headerRight: (<View></View>),
    }
  }

护理组件：

export default class Undercare extends React.Component {
    render() {
        return (
           <View>
               <View style={{flexDirection: 'row', width:500, height:58, alignItems:'center', paddingLeft:25, backgroundColor:'#008A20', paddingTop:15, paddingBottom:20, backgroundColor:'#008A20'}}>
                    <Image style={{ width:50, height:50, marginRight:20}} source={require('../HAGo/default_userIcon.png')} />
                    <Text style={{fontSize: normalizeFontSize(18), color:'#fff'}}>{getUndercareName()}</Text>
                </View>
           </View>
        )
    }
}

后退按钮未与通知中心标题正确对齐：/

Answer 1

而不是使用标题使用 headerTitle，您可以在其中添加组件而不是字符串。

static navigationOptions = ({ navigation }) => {

  return {
      headerTitle: () =>
        <View>
            <Text>{localizedTitle()}</Text>
            <Text>subtitle</Text>
        </View>,
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor: isUndercareMode() ? getUndercareColor() : 'rgb(255,0,0)'
      },
      headerTitleStyle: { 
        fontWeight: 'bold',
        textAlign: 'center',
        fontSize: normalizeFontSize(18),
        flex: 1
      },
      headerLeft: <BackButton
                    accessible={false}
                    testID='LeftButton'
                    accessibilityLabel="headerLeftButton"
                    />,
                    
      headerRight: (<View></View>),
    }
  }

Answer 2

您可以创建自定义 header 组件并将其作为选项传递以覆盖默认 header。

有关工作示例，请参阅此小吃： https://snack.expo.io/@zayco/header-styles_custom

用 header 替换所有旧的 header 选项

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={HomeScreen}
      options={{
        header: () => renderHeader()
        }}
    />
  </Stack.Navigator>
</NavigationContainer>

添加 function 以呈现自定义 header

const renderHeader = () => (
 <View style={styles.header}>
   <View style={styles.headerTop}>
     <View style={styles.headerLeft}>
       <Text>Back</Text>
     </View>
     <View style={styles.headerCenter}>
       <Text style={styles.headerTitle}>Notification Center</Text>
     </View>
     <View style={styles.headerRight} />
   </View>
   <View style={styles.subHeader}>
    <View style={styles.subHeaderLeft}>
     <Text>ICON</Text>
    </View>
    <View style={styles.subHeaderCenter}>
     <Text style={styles.subHeaderName}>CHUI, Tai Hung</Text>
    </View>
   </View>
 </View>
)

添加自定义header使用的styles。 您可以使用 styles 来满足您的需求。

const styles = {
 header: {
  flex: 0,
  backgroundColor: 'green',
  marginTop: Platform.OS == "ios" ? 20 : 0, // only for IOS to give StatusBar Space
  padding: 10,
 },
 headerTop: {
  flexDirection: 'row',
 },
 headerLeft: {
  flex: 1,
  backgroundColor: 'red',
  justifyContent: 'center',
 },
 headerCenter: {
  flex: 6,
  alignItems: 'center',
 },
 headerTitle: {
  fontSize: 18,
  color: 'white',
  fontWeight: 'bold',
 },
  headerRight: {
  flex: 1,
 },
 subHeader: {
  flexDirection: 'row',
  paddingTop: 10,
 },
 subHeaderLeft: {
  backgroundColor: 'yellow',
  padding: 5,
 },
 subHeaderCenter: {
  justifyContent: 'center',
  alignItems: 'center',
 },
 subHeaderName: {
  color: 'white',
  marginLeft: 10,
 }
}