多行标题 - React Native答案

【问题标题】：multiline header - React Native多行标题 - React Native
【发布时间】：2020-07-20 07:51:28
【问题描述】：

我有一个 React Native 应用程序。
我想在标题下方添加一个副标题。

类似的东西

标题代码：

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

如何实现这个多行标题？

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

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

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

Undercare 组件：

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

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

【问题讨论】：

这能回答你的问题吗？ How to set multi line header in react native?
没有 Zayco。我猜需要在“headerLeft”中添加一个组件
您最好将组件创建为视图内的子标题。您仍然可以使用导航道具来填充名称。
标题组件的布局不会让你以一致的方式做你想做的事。您是否有一个特别的原因不想将带有名称的子标题作为单独的组件？
没有理由哈哈。我现在就试试。创建一个子标题组件并将其添加到 headerTitle？还是 headerLeft？

标签： javascript reactjs react-native header

【解决方案1】：

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

查看此小吃以获取工作示例：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>

添加渲染自定义标题的函数

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

添加自定义标题使用的样式。您可以根据自己的需要调整样式。

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,
 }
}

【讨论】：

【解决方案2】：

使用 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>),
    }
  }

【讨论】：