尝试使用 react-navigation 在 React Native 的许多屏幕上实现“无互联网”通知。我试图避免将组件添加到所有屏幕视图渲染功能，因为它感觉像样板。
有没有一种简单的方法可以使用 react native 导航在一个地方添加一个组件并让它在所有屏幕上持久化？
我有多个屏幕，每个屏幕都是一个 stackNavigator。任何创建的 stackNavigator 都在抽屉内。在每个屏幕中，当按下 stackNavigator 标题的 BackButton 时，屏幕总是导航到 initialRoute 而不是回到上一个屏幕。
我测试navigation.goBack()和navigation.goBack(null)和
navigation.goBack()和navigation.goBack(this.props.navigation.state.key)}
但这些都没有奏效。这是我的代码：
const MenuScreenNavigator = createStackNavigator({
Menu: {
screen: MenuScreen,
navigationOptions: ({ navigation }) => ({
headerLeft: (
<HeaderBackButton
tintColor="white"
onPress={() => navigation.goBack()}
/>
)
}
我有多个屏幕导航器，例如菜单导航器：“加载”、“主页”、...屏幕。在继续我有抽屉导航器：
const drawerConfig = {
drawerPosition: 'right',
contentComponent: CustomDrawerContent,
initialRouteName: "Load"
}
const routeConfig = {
Menu: {
screen: MenuScreenNavigator,
navigationOptions: { title: strings.screenName.menu }
},
Load: { screen: AuthLoadingScreenNavigator },
Login: {
screen: LoginScreenNavigator,
navigationOptions: { …使用 react-navigation-stack 1.10.3，重置 StackActions 将新堆栈加载到位，无需转换。与 react-navigation-stack 2.0.15 相同的代码片段添加了一个平台默认过渡，对于 iOS，它是 SlideFromRightIOS。
如何在 1.10.X 和 2.0.X 上复制之前的行为，其中在堆栈重置时没有转换？
navigation.dispatch(
StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({
routeName: user ? 'Home' : 'Landing',
}),
],
}),
);我无法在 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
我正在使用 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导航（3.x）中为全屏模式提供透明背景。此处给出的解决方案不适用于新版本的react-navigation。我想要新的全屏模式中的透明颜色，该颜色显示在另一个屏幕上。
const MainNavigator = createStackNavigator(
{
BrowserHome: { screen: BrowserHome },
ImageDetailModal: {
screen: ImageDetail,
navigationOptions: {
header: null
}
}
},
{
mode: "modal",
cardStyle: {
backgroundColor: "transparent",
opacity: 1
}
}
);
const AppContainer = createAppContainer(MainNavigator);
export default AppContainer;
在“ BrowserHome”组件上显示的“图像细节”组件是：
export default class ImageDetail extends React.Component {
render() {
const modalColor = this.props.navigation.getParam("modalColor");
return (
<View
style={{ flex: 1, flexDirection: "column", justifyContent: "flex-end" }}
>
<View
style={{
height: "50%",
width: "100%",
backgroundColor: "red",
justifyContent: "center" …我是 React Native 的新手，我正在尝试创建一些仅用于学习和测试的东西......
现在，我正在尝试创建一个带有登录屏幕和“登录区域”中的其他一些屏幕的应用程序。所以，我想在“记录区域”屏幕上使用标题栏，而不是在登录屏幕上。
为此，我正在尝试使用 React-Navigation，并在Stack.Screen. 但是不工作...
这是我当前的代码：
[...]
const Stack = createStackNavigator();
[...]
<NavigationContainer>
<Stack.Navigator headerMode="screen">
<Stack.Screen headerTitle="Test" headerShown={false} screenOptions={{headerTitle: 'Test', headerShown: false}} name="Login" component={Login} />
</Stack.Navigator>
</NavigationContainer>
[...]
我正在测试headerTitle和是否headerShown作为财产或作为screenOptions' 选项工作......但没有任何效果。
现在，我的屏幕在标题中有一个“登录”标题（忽略headerTitle属性和选项）并显示标题（忽略headerShown属性和选项）。
有人能告诉我我做错了什么吗？
react-native react-native-android react-navigation react-navigation-stack