Question

我正在从反应导航中使用StackNavigator。我想在导航栏中的右上角添加一个图标，但是如何添加呢？这是我的代码-

export const Routes = StackNavigator({
    MyList: {
        screen: MyList,
        navigationOptions: () => ({
            title: "MyList",
        }),
    },
   }
)

Answer 1

我得到了答案-

virtual

Answer 2

您可以使用props中的headerRight() navigationOptions

示例：

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

您可以将Button组件替换为所需的

更多信息Refer this Link Headers Button React Native

注意：：请在Button内使用TouchableHighlight，TouchableOpacity，headerRight()之类的组件。有关处理触摸的更多信息，请参考此链接 HANDALING TOUCHES

============================== 示例 ========= ======================

 class HomeScreen extends React.Component {

     constructor(props) {
        super(props)
     }

       static navigationOptions = ({ navigation }) => {
         return {
            headerRight: (
             <Button
                onPress={() => navigation.goBack() }
                title="Info"
                color="#fff"
            />
        ),
    }
};

如果您想在标题右侧的按钮中使用navigation属性，则必须使用下面的give syntext并在标题右侧访问该导航属性

  static navigationOptions = ({ navigation }) => {
    return {
        headerRight: (

         ),
     }
  };

在这里您可以使用

`navigation.goBack()`, `navigation.navigate("SCREN NAME")` etc..

反应本地图标到导航栏

2 个答案: