如何在react-native中设置左侧的后退按钮样式？
在React Native中设置左侧的后退按钮样式可以通过以下步骤实现：
- 首先，你需要在你的React Native项目中安装导航库，如React Navigation或React Native Navigation等。这些导航库提供了一些功能强大的导航组件和方法。
- 一旦你安装了导航库，你可以在你的导航组件中添加一个后退按钮。例如，如果你使用的是React Navigation，你可以在Stack Navigator中添加headerLeft属性来自定义左侧的组件。
import { createStackNavigator } from 'react-navigation';
const AppNavigator = createStackNavigator({
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
}, {
defaultNavigationOptions: {
headerLeft: () => (
// 自定义后退按钮的样式和功能
),
},
});- 在headerLeft中，你可以使用任何React Native组件来定义后退按钮的样式。例如，你可以使用Icon组件、TouchableOpacity组件或自定义的图标组件。
import { TouchableOpacity, Image } from 'react-native';
import { withNavigation } from 'react-navigation';
const BackButton = ({ navigation }) => (
<TouchableOpacity onPress={() => navigation.goBack()}>
<Image source={require('path/to/backIcon.png')} style={{ width: 20, height: 20 }} />
</TouchableOpacity>
);
export default withNavigation(BackButton);在上面的例子中，我们创建了一个自定义的后退按钮组件BackButton，并使用TouchableOpacity和Image组件来展示一个后退图标。通过withNavigation高阶组件，我们可以在组件中访问到navigation对象，并使用goBack()方法来实现后退功能。
- 最后，将自定义的后退按钮组件添加到headerLeft中即可完成设置。
import BackButton from './BackButton';
const AppNavigator = createStackNavigator({
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
}, {
defaultNavigationOptions: {
headerLeft: () => <BackButton />,
},
});通过以上步骤，你就可以在React Native中设置左侧的后退按钮样式了。记得根据你的具体需求来自定义后退按钮的样式，并实现相应的后退功能。
相关·内容
我有一个表，它有一个添加单元格的选项。在模拟器中，它显示的是“编辑”，而不是默认的后退按钮。我已经将它设置为可以滑动来删除，所以我不需要这个编辑按钮。如何让它返回到默认的后退按钮？
override func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
if editingStyle == UITableViewCellEditingStyle.Dele
浏览 0提问于2016-02-25得票数 0
如何在NavigationBar中制作一个看起来像后退按钮的自定义按钮？我的意思是左边的形状像一个箭头。在某种意义上，如何将图像设置为后退按钮？
浏览 0提问于2011-10-12得票数 0
回答已采纳
2回答
当我在Edge浏览器上按下后退按钮时，我使用以下代码来防止在电子邮件字段中保留值。
<form>
<input autocomplete="off" type="email" name="email" value="" id="Email123" placeholder="email" />
</form>
<form autocomplete="off">
<input type="email"
浏览 30提问于2017-08-14得票数 0
2回答
如何在导航应用中显示后退按钮？
、、、、
我正在基于导航的应用程序中推送一个表视图。推流视图(viewOld)和推流视图(viewNew)都是UITableViewControllers。我已经从viewOld给了viewNew一个标题。一旦出现viewNew，我就会看到标题，但在左侧看不到后退按钮。为视图(viewNew)指定标题后，是否应该出现一个后退按钮？
我可以在viewNew中单击导航栏左侧的空白区域，然后返回到viewOld。但是为什么后退按钮不可见呢？我在OS3.0中做到了这一点，但我不认为后退按钮的功能或行为与以前的版本相比有所改变。
从viewOld推送viewNew：
ViewNew * viewNew = [[V
浏览 4提问于2009-10-04得票数 0
我在应用程序中使用了第三方代码(菜单)来更改导航控制器的后退按钮标题。因此，我使用了如下代码：
self.navigationItem.hidesBackButton = YES;
self.navigationItem.leftBarButtonItem = [[[UIBarButtonItem alloc] initWithTitle:@"Geri" style :UIBarButtonItemStyleBordered target:self action:@selector(myCustomBack)] autorelease];
这段代码运行良好，但在iOS 7中没有
浏览 1提问于2014-03-24得票数 0
2回答
我是新来的react本地用户，我试图将后退按钮与左边对齐，但是将标题保持在中心位置，但是没有什么工作，这是代码。
TouchableOpacity是后退按钮，文本是标题，每个按钮都有自己的风格。
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import { Colors } from '../Variables';
class Header extends Compo
浏览 2提问于2018-03-09得票数 0
回答已采纳
1回答
我在react-native中工作。我在我的移动应用程序中有一个表单页面，并有一个编辑按钮和后退按钮。一旦编辑按钮被点击，我想要一个保存和取消按钮，以取代编辑和后退按钮，他们应该有自己的功能。我已经在我的呈现函数中尝试过componentWillUpdate()和if else语句，但似乎都不起作用。
浏览 11提问于2017-06-23得票数 0
我正在致力于将一个应用程序移植到React-Native来测试它。当我弹回导航器堆栈中的上一个视图时(点击后退按钮)，我想运行一些代码。有没有viewWillAppear方法？我看到导航器上有一个"onDidFocus()“回调，这听起来可能是正确的事情。但在NavigatorIOS上似乎没有这样的东西
浏览 0提问于2015-04-14得票数 13
3回答
我看到很多iPad的应用程序都有很酷的标题栏。这些似乎是导航栏和工具栏的组合。他们通常有一个后退按钮和一个标题以及男人的其他按钮。导航栏仅支持左侧项目、右侧项目和标题视图。而且工具栏并不真正支持后退按钮或标题。
那么，如何在UINavigationController驱动的应用程序中实现这些带有许多按钮的丰富导航栏呢？
浏览 3提问于2010-04-10得票数 12
回答已采纳
如何使用React-Native禁用Android上的物理设备后退按钮？我不想为用户启用它。
浏览 45提问于2018-12-13得票数 3
回答已采纳
2回答
我正在尝试将左padding或margin添加到header left icon中，这是登录页面上的后退按钮。下面是我的代码，我尝试添加headerLeftContainerStyle，但它不起作用。在主页上，菜单图标与左边的填充物完美地设置在一起，但在登录页面上，后退按钮与屏幕的左侧相连。
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import 'react-native-gesture-han
浏览 4提问于2021-06-07得票数 1
回答已采纳
我正在创建一个使用导航控制器的应用程序。我已经完成了在导航栏中添加和删除UIBarButtonItem的工作。我有一个后退按钮在我的左侧和一个额外的按钮在右侧命名(更多)。
现在我的要求是，当我点击更多时，我需要在导航栏的左侧添加一个关闭按钮，后退按钮应该是隐藏的。我也受够了。
问题是在删除我正在使用的关闭按钮时：
self.navigationItem.leftBarButtonItem = nil;
它也移除了我的后退按钮。我需要保留后退按钮，只想删除按钮。
我不知道我是否正确，我需要写代码来显示后退按钮后退。或者有什么方法可以让我在单击MORE按钮时只删除CLOSE按钮或自行关闭。
谢谢
浏览 1提问于2010-12-24得票数 2
回答已采纳
我正在寻找一种方法来隐藏在React-Native-Router-Flux导航栏上的后退按钮的文本标签。
headerLeft prop没有达到目的，设置left={()=>null}会隐藏按钮本身(以及标题)
React-Native 0.46.4
浏览 0提问于2018-02-22得票数 1
我有两个表视图控制器，它们通过Storyboard中的"segues“相互连接。然后我切下了"segues“并插入了另一个控制器。现在的连接不是通过"segues“。要连接我正在使用的代码的视图：
UIStoryboard *storyboard = self.storyboard;
OptionsViewController *options = [storyboard instantiateViewControllerWithIdentifier:@"OptionsViewController"]
[self.navigationController
浏览 2提问于2014-01-03得票数 0
我正在我的Ionic 4应用程序中工作，我已经在我的工具栏中添加了一个后退按钮，我只想在一些特定的页面上显示后退按钮。
我是app.component.html
<ion-back-button class="btnmy11" defaultHref="/"></ion-back-button>
我只想在一些特定的页面上显示后退按钮。
我添加了CSS，用于在某些特定页面上显示“后退”按钮，但它不起作用。
我还添加了[hidden]="menuIsHidden"，并将其默认为false，在某些特定页面上为true，但这也不起
浏览 1提问于2019-03-19得票数 0
回答已采纳
我找不到一种在上控制React-Native Webview的方法。
还有另一个问题，你知道如何在React-Navigatoin中按后退按钮吗？
如果你给了正确的答案，你就是个好人。
浏览 1提问于2018-08-10得票数 3
回答已采纳
1回答
每次单击图片时，我都会调用此方法(将视图推送到细节视图上)：
-(IBAction) loadTeamView:(id)sender {
teamView = [[TeamViewController alloc] initWithNibName:@"TeamViewController" bundle:nil detailItem:self.detailItem];
[self.navigationController pushViewController:teamView animated:YES];
}
它是有效的，但如果您单击后退按钮(自动弹出)，然后返回到此方法，则不
浏览 0提问于2012-01-01得票数 2
回答已采纳
3回答
我在这件事上有很多问题。
首先，UINavigationBar内置于UINavigationController中，它将我的UIViewControllers的其余部分的位置向下推(我必须手动将位置推回原处)。我搜索了堆栈溢出，其中一项建议是隐藏当前的导航条，并在接口构建器中手动添加一个UINavigationBar。这就引出了我的第二个问题：
如果我通过IB手动添加一个UINavigationBar，导航就变成“断开连接”，例如，需要手动实现back按钮才能弹出视图控制器。这就引出了我的第三个问题：
我得到的说明是，它想要后退按钮的形状(按钮的左边像一个三角形)。不幸的是，我一直
浏览 0提问于2011-07-18得票数 0
回答已采纳
重新启动通过在react-native中按下后退按钮关闭的应用程序后，为什么组件屏幕不显示状态栏 第一次启动应用程序时： ? 关闭第一个启动的应用后，第二次启动应用： ?
浏览 29提问于2021-09-05得票数 1
回答已采纳
我在react-native中安装了包
我已经实现了选项卡导航，其中一个是以webview格式实现的。
我的问题是，如果我按下Android上的后退物理按钮，我会从应用程序本身转到上一个选项卡，而不是从网页视图返回。
我已经在互联网上应用了webview的后退按钮，但我还没有这样做。
我试图在调试时显示onNavigationStateChange日志，但在第一次启动时加载url后，url被移动时，它没有更新。下面是我实现的代码：
import React from "react";
import {BackHandler} from "react-native"
浏览 6提问于2019-03-12得票数 9
1回答
如何在颤振中实现航行路线？
、、、、
我设计了我的场景来理解流程。
仪表板Screen=>打开侧抽屉=>Select任何menu=> First screen=>第二screen=>open对话框(第二个屏幕)=>第一个screen=>侧抽屉。
我想使用上面这样的导航流，当我点击对话框内的按钮时，我想去第一个屏幕，而不是第一个屏幕，点击后退按钮，所以去侧抽屉。
我使用下面的代码来导航屏幕。
Navigator.of(context).pushNamed(screenName)；
请建议我如何实现我以上提到的流程。
浏览 1提问于2022-10-20得票数 1
1回答
我创建了一个别名示例如下：
我需要对齐在同一行的确认选项卡上的后退按钮与Sumbit按钮。后退按钮左对齐，提交按钮右对齐，都是同一行。有可能吗？
谢谢
浏览 5提问于2016-06-01得票数 0
6回答
我想把按钮移回去，但是把头留下。
我的组成部分如下。我想留下标题，我不需要后退按钮。
import React from 'react';
import { View } from 'react-native';
export const TrucksScreen = () => {
return (
<View>
....
</View>
);
});
TrucksScreen.navigationOptions = {
headerTi
浏览 10提问于2020-02-14得票数 3
回答已采纳
我想添加一个后退按钮到我的webview应用程序。
通过UIBarButtonItem，我似乎找不到一个后退按钮。见代码：
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let url = NSURL(string: "http://google.com")!
webView.loadRequest(NSURLRequest(URL: url))
浏览 3提问于2016-05-26得票数 4
回答已采纳
所以我遇到了标题颜色错误的问题。(标题后退按钮和菜单下拉菜单都是由主题决定的)，我希望这些是一个自定义的颜色。 我该如何创建自己的主题，或者我还应该做些什么？我可以看到主题编辑器现在被弃用了，我在网上找到的那个编辑器不能让我编辑我需要的东西。谢谢！
浏览 15提问于2020-02-02得票数 0
回答已采纳
我在我的Ubuntu15.10机器上安装了GNOME 3.16.4。然而，我得到了老无聊的统一，像文件经理。这是我的档案经理的照片。看，顶部的栏就像Ubuntu，按钮在左边。
📷
然而，我希望这是我的顶部酒吧完全像下面的一个。你可以键入路径。此外，您得到关闭，最大化和最小化按钮在右边，只有后退按钮在左边。
📷
浏览 0提问于2015-12-13得票数 2
回答已采纳
2回答
我正在使用一个名为Qualtrics的调查工具，我想知道我们是否可以按左上角的后退按钮而不是左下角的按钮，而下一个按钮则停留在底部。
我找到了一个克隆按钮的代码。但我只想使用JS按下顶部的实际后退按钮。
<script type="text/javascript">
Qualtrics.SurveyEngine.addOnReady(function() { jQuery('#HeaderContainer').after(jQuery('#Buttons').clone(1)); $('Header').insert
浏览 6提问于2021-03-26得票数 1
回答已采纳
我在左上角添加了一个菜单按钮，当你打开网站时就会出现。页面中的所有链接都通过ajax请求调用外部页面(如JQM中的默认设置)。以前，当我在右边有菜单按钮时，我曾经在任何ajax请求之后在左边得到一个后退按钮，但是自从我把菜单按钮移到右边之后，后退按钮就不再出现了。谁能告诉我如何在ajax请求后覆盖菜单按钮？
浏览 0提问于2013-02-14得票数 3
我有一个带有多个屏幕的react-native应用程序，每个屏幕上都有一个上栏，其中有一个后退按钮，它的主要行为是，当按下这个按钮时，应用程序返回到主屏幕。我想要做的是将这种行为复制到“硬件后退”按钮(现在按下“硬件后退”按钮，应用程序就会关闭)，我该如何做呢？
更新：
我用的是react-navigation和redux
浏览 0提问于2018-06-08得票数 15
回答已采纳
我试图在两个场景之间创建一个转换，这是我在生产代码中所拥有的一个简单的版本：
两者都是ViewController，左边的一个在里面有一个TableView，当点击它时，它应该转换到右边的场景，传递来自任何单击单元格的数据。
目前，使用一个模态索引，我可以点击单元格，它可以正确地转换，然而，，我不知道如何将一个后退按钮到导航栏。
我正在从单元格过渡到第二个视图控制器，如下所示：
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[self
浏览 3提问于2012-06-14得票数 1
回答已采纳
当我点击UINavigationController项上的后退按钮时，我想得到通知。因此，我创建了一个自定义的UIBarButtonItem
UIBarButtonItem *leftBarButton = [[UIBarButtonItem alloc] initWithTitle:NSLocalizedString(@"SettingsTabTitleKey", @"") style:UIBarButtonItemStyleBordered target:self action:@selector(settingsButtonPushed:)];
s
浏览 1提问于2011-12-06得票数 2
回答已采纳
我有一页。屏幕如下
import React, { useState } from "react";
import { Button, Text, View } from "react-native";
export default function ViewA() {
const [val, setVal] = useState('')
return (
<View>
<Text>{val}</Text>
&l
浏览 3提问于2021-02-21得票数 0
回答已采纳
1回答
Xcode对象库包含一个UINavigation条，该条声明可以同时启用标题和后退按钮。默认情况下，UINavigationBar在左边显示一个后退按钮，在中间显示一个标题，但是除了在导航栏的右边提供一个可选按钮之外，您还可以为这些视图指定自定义视图。在我的故事板和一个UIView中，我只看到了标题，而不是模拟器中的后退按钮。真正的设备显示两者，还是我需要做一些更多的连接或segue-代码来查看后退按钮？
浏览 0提问于2013-03-15得票数 1
回答已采纳
我正在使用react-native来开发一个示例应用程序。在这里，当我在react本机侧边菜单组件中使用backHandler时，我遇到了一个问题。
实际上，侧边菜单包含更多页面！但当单击侧边菜单页面中的Android后退按钮时，仅当后退处理程序工作时。这里我使用的是react-native路由器-flux。
这里的back按钮操作只调用了一次！
这是我的代码：
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}
compone
浏览 0提问于2018-11-14得票数 6
3回答
在我的sub应用程序中，我试图在所有的子页面中添加主页按钮，点击这些按钮就会触发ActionResult Index()，有什么建议吗？
我只是在我的子页面DetailsForm中添加了一个按钮。它在提交按钮的旁边。在用户完成保存后，用户可以单击home按钮直接到达Index.cshtml。避免任何浏览器后退按钮。下面的代码肯定不适合我！
<input type="button" class="btn btn-lg btn-success" onclick="location.href='index.cshtml';"
浏览 10提问于2017-11-15得票数 0
回答已采纳
我正在使用react native开发应用程序。我已经实现了导航的NavigatorIOS组件。它适用于推送和弹出导航，但它显示默认的后退按钮与上一个页面标题和后退箭头。我有像取消按钮右侧和没有后退/左按钮的设计。我知道这只是objective-c中隐藏后退按钮的一行代码。
我尝试了react原生文档，但没有找到任何与此相关的内容。
有谁知道这件事吗？
浏览 2提问于2016-06-15得票数 0
我目前有一个UINavigationBar的leftBarButton的按钮图像。有没有办法消除这个按钮和UINavigationBar左边缘之间的空白？我想过只为UINavigationBar的背景制作一个自定义图像，但我希望能够使用在其他屏幕上生成的后退按钮。想法？
浏览 4提问于2012-08-11得票数 2
我正在尝试在react本地react导航5中将标题后退按钮的颜色从带白色箭头图标的灰色背景到带黑色箭头图标的彩色背景。 ? ? 我尝试执行以下操作，但它抛出了RangeError: Maximum call stack size exceeded. const yOffset = useRef(new Animated.Value(0)).current;
const backButtonBackgroundColorAnimation = yOffset.interpolate({
inputRange: [0, 130],
outputR
浏览 25提问于2020-08-29得票数 1
回答已采纳
2回答
无法在android中更改后退按钮的颜色。在ios中，运行得非常好。
((NavigationPage)Application.Current.MainPage).BackgroundColor = (Color)App.Current.Resources["white"];
((NavigationPage)Application.Current.MainPage).BarBackgroundColor = (Color)App.Current.Resources["white"];
((NavigationPage)Application.Current.M
浏览 0提问于2019-06-26得票数 2
我经常发现自己在构建有多个屏幕的程序。例如，假设一个程序的初始布局提供了两个按钮:创建文件或编辑文件。单击一个按钮后，它会将用户带到一个新的屏幕，支持他们按下的任何按钮。然后，他们点击一个后退按钮，它会带他们回到程序的主屏幕。我想知道怎样才能最好地做这样的独立菜单。最好是创建单独的方法来设置每个屏幕，然后在单击按钮(如“后退”按钮)时调用适当的方法。这就是我想要做的，但是看到有很多方法可以做到这一点，我想要得到关于改变屏幕显示的可能更好的方法的意见。谢谢，AJ
浏览 4提问于2012-07-25得票数 0
回答已采纳
我用代码在集合视图控制器中添加了左导航后退按钮。
//Add Navigation Bar
navbar.autoresizingMask = [.flexibleWidth, .flexibleBottomMargin, .flexibleRightMargin]
navbar.delegate = self
UINavigationBar.appearance().barTintColor = UIColor(red: 0.0/255.0, green:49.0/255.0, blue:79.0/255.0, alpha:0.1)
UINavigatio
浏览 2提问于2017-05-23得票数 0
我正在尝试为UINavigationController堆栈中的按下VC设置设置后退按钮。我使用以下代码，但它不起作用-我仍然得到前面的VC名称显示为后退按钮标题。
-(void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
self.title = @"VC Title";
UIBarButtonItem* myBackButton = [[UIBarButtonItem alloc]
in
浏览 2提问于2013-08-26得票数 10
回答已采纳
我试图为iOS 7定制一个应用程序的UI。我想要精确的BackBarButton of iOS 7，但箭头和标题的颜色不同，标题的字体也不同。这是iOS 7的后退按钮。
我试着用下面的代码定制它
UIImage *backButtonImage = [UIImage imageNamed:@"back.png"];
UIButton *customBackButton = [UIButton buttonWithType:UIButtonTypeCustom];
[customBackButton addTarget:self action:@
浏览 3提问于2014-01-16得票数 0
回答已采纳
1回答
我有两个屏幕，屏幕A和屏幕B。我将屏幕B包括在屏幕A中。当我在屏幕B中时，我可以从设备的后退按钮导航回屏幕A。
但当我转到屏幕B并导航回屏幕A时，设备的后退按钮在屏幕A中不起作用。
屏幕A
import React, { Component } from 'react';
import { View, Button, BackHandler } from 'react-native';
import B from './B';
export default class A extends Component {
浏览 0提问于2020-09-15得票数 0
在尝试使用styled.button方法在视图中呈现按钮后，我在手机中收到上述错误消息。 下面是使用styled.button方法的一段代码。 import styled from 'styled-components/native';
import React from 'react';
import { View } from 'react-native';
const ButtonView = styled.button`
backgroundColor:red;
color:white;
border: 2px solid white
浏览 12提问于2020-04-30得票数 0
我在React Native中处理硬件后退按钮时遇到了问题，当我在硬件/设备中按下后退按钮时，我想返回特定的页面/组件，但我总是得到错误'undefined is not an object (计算'this.props.navigation')。
这是我的脚本：
import { Platform, StyleSheet, Text, View, BackHandler } from 'react-native';
import { createStackNavigator, createAppContainer, Navigation
浏览 5提问于2019-10-30得票数 0
2回答
我想要全屏显示一个react-native-map。但是StackNavigator (react原生导航)的标题应该显示在地图上。状态栏也是如此。我想在地图上添加一个小的渐变，使状态栏和后退按钮(也许在右边的标题侧有更多按钮)更具可读性。
此时使用StackNavigator会自动将“全屏”地图(flex: 1)限制在导航头的底部。
如何解决这个问题？
react-native: 0.46
反应导航: 1.0.0-beta.11
浏览 14提问于2017-07-28得票数 1
我留下了一小段示例代码，因为我有我的代码，实际上我的代码我在FlatList中显示它……但在这里，我给他留下了一些在.map中类似的东西，它们实际上是一样的，它们是动态视图，我希望在点击按钮后，视图会改变样式(位置、宽度、后退颜色等等)
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExam
浏览 40提问于2020-05-13得票数 0
1回答
我在managed Workflow中构建了一个单独的世博会应用程序(Android)，带有一个包含webview的静态屏幕。
import React, { Component, useState } from "react";
import { Alert, StyleSheet, Text, TouchableHighlight, View, Modal } from 'react-native';
import { WebView } from 'react-native-webview';
export default clas
浏览 10提问于2020-05-26得票数 0
回答已采纳
我有下面的代码来处理Javascript中Framework7中设备的后退按钮。我想知道是否所有后续页面都在使用Ajax，如何使用“后退”按钮将其移回以前的页面。目前，按后退按钮，总是提示用户，如果他想退出应用程序。该应用程序有20页，但它们都显示为Ajax页面，而不是HTML页面。
<!-- We don't need full layout here, because this page will be parsed with Ajax-->
请帮帮忙。谢谢你的帮助！
function onLoad() {
document.ad
浏览 3提问于2017-06-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
