博览会反应导航标题中未显示的按钮答案

【问题标题】：buttons not displaying in expo react navigation header博览会反应导航标题中未显示的按钮
【发布时间】：2020-03-25 10:56:14
【问题描述】：

我正在关注 this 教程来学习博览会中的反应导航。在这个标题中，当我给出按钮时，它没有显示在标题中。代码如下

export default function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={Homecomponent}
            options={{
              headerTitle: ()=> <Icon name="home" />,
              headerRight: () => (
                <Button
                  onPress={() => alert("This is a button!")}
                  title="Info"
                  color="#00cc00"
                />
              )
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
}

headerRight 按钮未显示。

TIA

【问题讨论】：

当我从按钮中删除“标题”并在按钮内添加“文本”时，它起作用了。有效。 headerRight: () => ( <Button onPress={() => alert("This is a button!")} color="#00cc00" > <Text>Info</Text> </Button> )

标签： react-native react-navigation expo react-native-navigation

【解决方案1】：

 import { HeaderBackButton } from 'react-navigation-stack';
//import Ionicons from 'react-native-vector-icons/MaterialIcons';// add if you have this

   export default function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={Homecomponent}
            options={{
              headerTitle: ()=> <Icon name="home" />,
              headerRight: () => (
                <HeaderBackButton 
                  onPress={() => alert("This is a button!")}
                  //title="Info"
                  color="#00cc00"
                />
// Here you can add your icon to show info sample code for icon is 
// <Icon name="info" size={25}/>
              )
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
}

试试这个代码可能对你有帮助

【讨论】：