标签: react-navigation
反应导航返回不导航到上一个屏幕
我在我的react-native应用程序中使用新的react-navigation 2.16.0。
我有欢迎（登录和注册）屏幕，然后是主堆栈。主堆栈包括成功验证（登录\注册）后的所有屏幕。
MainStack = createStackNavigator(
{
Welcome: {
screen: Welcome, navigationOptions: {
gesturesEnabled: false,
}
},
Main: {
screen: App, navigationOptions: {
gesturesEnabled: false,
}
}
}, {
headerMode: 'none',
lazy: true,
initialRouteName: UserStore.token ? 'Main' : 'Welcome',
gesturesEnabled: false,
cardStack: {
gesturesEnabled: false
},
cardStyle: {
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
borderTopWidth: 0
},
transitionConfig: () => ({
containerStyle: {
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
borderTopWidth: 0
}
}),
}
)`
主堆栈渲染
render() {
// const …推荐指数
解决办法
查看次数
从 Promise 回调中导航
我刚刚开始使用 React Native，在尝试从 Promise 回调中导航时遇到了以下问题。
这是我尝试运行的以下代码。如果 http 请求返回用户的登录信息正确，我想导航到另一个屏幕。
login() {
axios({
method: 'post',
url: `${Globals.WebAPI}/api/authentication/login`,
data: {
username: this.state.username,
password: this.state.password
}
})
.then(function(response) {
console.log(response.data.token)
AsyncStorage.setItem("AuthToken", response.data.token);
this.props.navigation.navigate('PictureDetails', {base64: photo.base64});
})
.catch(function(error) {
console.log(error);
});
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={this.goToDetails}
/>
<Button
title="Signup"
onPress={this.goToSignup}
/>
<Text>Username</Text>
<TextInput
style={{height: 40, width: 200, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({username: text})}
value={this.state.username}
/>
<Text>Password</Text>
<TextInput …推荐指数
解决办法
查看次数
无法在反应导航堆栈中居中标题 - React-Native？
我无法在 react-navigation V4+ 中将标题居中，在使用 v3 之前它的工作正常，当使用 RN-stack 时，由于某种我不知道的原因，我无法将标题居中。
它只是出现在右边，
我尝试这些中headerTitleStyle和headerStyle
justifyContent, alignItems and alignSelf but not works :/
如果你有任何想法告诉我？
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^2.0.16",
"react-native-screens": "^2.0.0-alpha.29",
这是代码
static navigationOptions = ({navigation}) => {
const showModal = navigation.getParam('showModal', () => {});
return {
title: navigation.getParam('title'),
headerTitleStyle: {
fontFamily: 'Cairo-Regular',
fontSize: Platform.OS == 'ios' ? 16 : 18,
color: '#fff',
flex: 1,
textAlign: 'center',
},
headerStyle: {
backgroundColor: navigation.getParam('color'),
},
headerRight: (
<Grid>
<Row>
<Body>
<Button
transparent
icon …javascript react-native react-navigation react-navigation-stack
推荐指数
解决办法
查看次数
反应导航 v5 中的 tabBarIcon 问题
我想为标签导航设置一个图标，但它返回一个错误
这是我的代码：
<Tab.Screen name="Home" component={Home} options={{tabBarIcon:'home'}} />
这是我得到的错误：
我怎样才能解决这个问题？
推荐指数
解决办法
查看次数
React navigation v5 在屏幕上获取 initialParams 道具
我已经尝试过很多次initialParams了this.props.navigation.state.params。这没有帮助。请帮助我如何获得这些参数。
<Stack.Screen name="FromMainScreenToSubCats" component={FromMainScreenToSubCats} initialParams={{catId:1 , title:'Filmler'}} />
推荐指数
解决办法
查看次数
如何在一个屏幕上隐藏反应导航标题
我需要在我尝试过的应用程序的登录页面上隐藏导航栏：
const Stack = createStackNavigator(
{
Landing: {screen: LandingScreen},
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
},
},
);
但我收到一条错误消息：
“创建导航器不需要争论……”
当我使用headerMode="none"它时会隐藏所有屏幕上的导航栏
<NavigationContainer>
<Stack.Navigator
headerMode="none" // this hides on all screens
screenOptions={{
headerStyle: {
backgroundColor: '#3c74db',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}>
<Stack.Screen
name="Landing"
component={LandingScreen}
options={{headerShown: 'none'}} // This does not work
/>
<Stack.Screen name="Sales" component={SalesScreen} />
<Stack.Screen name="Sign In" component={SignInScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
<Stack.Screen name="Create Item" component={CreateItemScreen} />
<Stack.Screen name="Payment" component={PaymentScreen} …推荐指数
解决办法
查看次数
React Navigation V5 在特定屏幕中隐藏底部选项卡
我正在使用 React Navigation 版本 5 创建一个 React Native 应用程序，我有一个底部选项卡导航器，其中一个堆栈导航器嵌套在选项卡导航器的每个屏幕内。我只希望底部标签栏显示在每个堆栈导航器的第一页上。这是一个显示我的应用程序基本导航功能的小吃：https : //snack.expo.io/@brforest/hide-tab-1。根据底部选项卡文档，有一个 tabBarVisible 选项属性，但是：
隐藏标签栏会导致故障和跳跃行为。我们建议改用堆栈导航器内的选项卡导航器。
在堆栈导航器中嵌套选项卡导航器的指南在这里。我尝试使用这种方法，但如果我只有一个堆栈导航器，我只能让它工作，但我需要为每个选项卡屏幕都有一个堆栈导航器。这是我（未成功）尝试在上一个小吃的同一应用程序上使用此方法：https : //snack.expo.io/@brforest/hide-tab-2。在此，我在单个堆栈导航器中嵌套了多个选项卡导航器，以尝试推断文档中建议的方法。正如您在本小吃中看到的，堆栈中的导航不再起作用，但选项卡仍然起作用。
对我来说，将堆栈导航器嵌套在选项卡导航器中（就像我在第一个小吃中那样）比尝试将相同的选项卡导航器嵌套在大型堆栈导航器中更有意义。但是，我想遵循文档并找到一种不会导致“故障和跳跃行为”的方法。关于如何实现我想要的导航功能的任何建议？
谢谢！
javascript react-native react-navigation react-navigation-v5
推荐指数
解决办法
查看次数
在嵌套导航器中导航时未定义 route.params？
我正在使用 React Native 和 React Navigation。我试图只让我的屏幕变成一个mode="Modal，但路线PARAMS我通过导航越来越“未定义”有错误时TypeError: undefined is not an object (evaluating 'route.params.title')。为什么会这样，我该如何解决？
我的尝试
const ModalScreen = () => (
<Modals.Navigator mode="modal">
<Modals.Screen
name="Modal"
component={Modal}
options={({ route }) => ({
title: route.params.title,
headerTransparent: true,
gestureResponseDistance: {
vertical: 500,
},
})}
/>
</Modals.Navigator>
);
const MainScreen = () => (
<Items.Navigator>
<Items.Screen
name="Main"
component={Main}
options={{ headerShown: false }}
/>
<Items.Screen name="Modal" component={ModalScreen} />
</Items.Navigator>
);
// Navigating to Modal in another file.
<TouchableOpacity
onPress={() =>
navigation.navigate("Modal", { …javascript reactjs react-native react-navigation react-navigation-stack
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
未找到 React Navigation Typescript 命名空间
当我尝试创建任何导航器（选项卡/堆栈/抽屉）时，我收到此打字稿错误：Cannot find namespace 'Tab'即使它是在文件本身中定义的。有什么问题，有什么解决办法？我已经使用了 expo 打字稿模板开始。
代码：
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React from "react";
type bottomTabParams = {};
const Tab = createBottomTabNavigator<bottomTabParams>();
const MyTabs = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" />
<Tab.Screen name="Settings" />
</Tab.Navigator>
);
};
export default MyTabs;
有错误的代码：
依赖关系
"dependencies": {
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "^5.9.1",
"@react-navigation/drawer": "^5.9.2",
"@react-navigation/native": "^5.7.5",
"@react-navigation/stack": "^5.9.2",
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"react-native-elements": "^2.3.2",
"react-native-gesture-handler": "~1.7.0",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4", …推荐指数
解决办法
查看次数
标签 统计
react-native ×10
react-navigation ×10
javascript ×5
reactjs ×3
expo ×1
tabnavigator ×1
typescript ×1