标签: react-navigation

当从一个屏幕转换到另一个屏幕时(使用卡片或模式模式),在屏幕到屏幕动画期间,有一个白色背景将其alpha从0 o 1转换.

如果可能的话,我想知道如何改变颜色.

环境

• React Native Navigation版本:1.0.0-beta.11
• React Native版本:0.45.1
• 平台:iOS和Android
• 设备:iOS 10.3,iPhone 6

我用来创建StackNavigation的一些代码

注意:模态背景颜色是由@Jason Gaare的答案/sf/answers/3154587971/解决的,现在问题仍然存在于StackNavigation上

let navOptions = {
    headerMode: 'screen',
    navigationOptions: ({navigation}) => ({
        headerTintColor: '#fff',
        headerStyle: {
            backgroundColor: '#1A1A1A',
        },
        headerTitleStyle: {
            color: '#fff',
            fontFamily: 'my-font'
        },
        headerLeft: (<ImageBtn
                        buttonStyle={{ .. }}
                        buttonHighlightStyle={{}}
                        source={ myImage }
                        imageStyle={{ ... }}
                        callback={navigation.goBack.bind(this, null)} />)
    })
};

const MyTab = StackNavigator({
    MyScreen1: {screen: MyScreen1},
    MyScreen2: {screen: MyScreen2},
    MyScreen3: {screen: MyScreen3},
    MyScreen4: {screen: MyScreen4},
}, navOptions);

我有在初始屏幕上从服务器加载的道具.我想将它们传递给其他选项卡屏幕.但是,我没有在网上找到任何例子.我知道screenProps,但不知道如何设置它.我尝试过的所有方法都导致了错误.

const EProj = TabNavigator({
  Home: { screen: HomeScreen },
  Map: { screen: MapG },
  Login: { screen: Login },
  Profile: { screen: Profile },
}, {
  tabBarPosition: 'bottom',
  animationEnabled: true,
  tabBarOptions: {
    activeTintColor: '#1abc9c',
  },
});

这是我的屏幕设置.我应该在哪里放置screenProps？

<EProj
  screenProps={cats}
/>

如何设置它的任何好例子都会有所帮助.提前致谢.

HomeScreen设置:

class HomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Home',
  };

...

  componentWillMount(){
    console.log("Starting to load assets from server!");
    this.onLoadCats(); /*starts asset loading*/
  }

  render() {
    return (
      <View style={styles.container}>

        <Text>Welcome to alpha 1.17 This is …

我正在使用react-navigation和react-native-push-notification.如何StackNavigator's在onNotification回调中打开某个屏幕？应该工作时:

• 应用已关闭
• 应用程序在前台
• 应用程序在后台

我现在只需要在Android上工作.

我试图将回调函数传递给我的组件中的通知:

_handleClick() {
  PushNotification.localNotification({
    foreground: false
    userInteraction: false
    message: 'My Notification Message'
    onOpen: () => { this.props.navigation.navigate("OtherScreen") },
  })
}

并onOpen在PushNotification配置中触发:

onNotification: function(notification) {
   notification.onOpen()
}

但似乎函数不能传递给通知,除非值是一个被忽略的字符串,导致onOpen未定义.

我有一个反应组件

const Example = () => (<View>...</View>);

使用反应导航我通常会说通过导航选项

Example.navigationOptions = { options };

使用打字稿我得到错误

[ts] Property 'navigationOptions' does not exist on type '(props: Props) => Element'.

我怎样才能解决这个问题？

我试着写一个界面

interface ExampleWithNavigationOptions extends Element {
    navigationOptions?;
}

但没有运气.

如何在AndroidManifest.xml中使用'adjustPan'和'adjustResize'响应原生app.

用例

我的导航是在ReactNavigation上使用StackNavigator和TabNavigator进行的.我有一个文本框,用户可以在其中键入任何数据.执行此操作时,标签栏显示在键盘顶部.为了阻止这个我使用'adjustPan',它工作正常.

在另一个屏幕上,我有一个注册多个文本框.除非您点击键盘上的"勾选"或手动点击系统后退按钮,否则我无法滚动整个屏幕.为了解决这个问题,我发现'KeyboardAvoidingView'工作正常.但要激活这个需要将'windowSoftInputMode'更改为'adjustResize'.

在文档中,发现这两个属性完全不同,我不能同时在一起.有人可以帮我吗？

参考文献:https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

我正在尝试将道具传递给已通过调用create...Navigator调用包裹的组件,即

// Search.js
const Navigator = createMaterialTopTabNavigator({
    Wines,
    Stores,
    Vineyards,
    Restaurants
});

// Somewhere in render()...
<Navigator />

我试图找出如何将参数传递到Wines/ Stores从/等的部件.Search组分(上文).我已经阅读了文档,显然这可以navigation.navigate通过传入一个对象轻松完成,但我不知道如何使用这个特定的方法.有人可以帮忙吗？

我正在用TypeScript构建一个React Native应用程序.对于我的导航,我使用React Navigation,对于我的单元测试,我使用Jest和Enzyme.

这是我的一个屏幕(LoadingScreen.tsx)的(精简的)代码:

import styles from "./styles";
import React, { Component } from "react";
import { Text, View } from "react-native";
import { NavigationScreenProps } from "react-navigation";

// Is this correct?
export class LoadingScreen extends Component<NavigationScreenProps> {
// Or should I've done:
// export interface Props {
//   navigation: NavigationScreenProp<any, any>;
// }

// export class LoadingScreen extends Component<Props> {
  componentDidMount = () => {
    this.props.navigation.navigate("LoginScreen");
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>This is the LoadingScreen.</Text>
      </View>
    ); …

我面临的问题TypeError : props.navigation.getParam不是函数。在(props.navigation.getParam('name'). 我正在使用reactNavigation version 5.x.此代码在reactNavigation 3. 我究竟做错了什么？

这是我的代码

export default class ChatScreen extends Component {
static navigationOption = ({ navigation }) => {
    return {
        title: navigation.getParam('name', null)
    }
}
 
constructor(props) {
    super(props);
   
  
    this.state = {
        person:{
           name:props.navigation.getParam('name'),
            phone:props.navigation.getParam('phone'),
            // name:'Raushan',
          //   phone:9931428888
        },
        textMessage: ''
    };
   
}

状态部分值错误。堆栈导航器

`

const Stack = createStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Auth">
        <Stack.Screen name="AuthLoading" component={AuthLoadingScreen} />
        <Stack.Screen name="App" component={HomeScreen} options={{ title: …

以下是我的应用程序导航器的层次结构

？？？appNavigator（底部标签导航器）

• ？？？提要（堆栈导航器）

  • 后详细信息屏幕
  • 页面详细信息屏幕
  • 配置文件详细信息屏幕
  • ...其他屏幕

• ？？？通知（堆栈导航器）

  • 配置文件详细信息屏幕
  • 页面详细信息屏幕
  • 发布详细信息屏幕
  • ...其他屏幕

• ？？？个人资料（堆栈导航器）

  • 配置文件详细信息屏幕
  • 页面详细信息屏幕
  • 发布详细信息屏幕
  • ...其他屏幕

现在的问题是我必须复制所有堆栈中通用的屏幕（ProfileDetail、PostDetail 和 PageDetail），以便在堆栈中访问它们。

对于此用例，是否有更好的解决方案。我应该在哪里放置通用屏幕，以便它们在所有子堆栈中可用，并且我不必在任何地方复制它们。

这是我经历的一个开放的 github 问题，但找不到好的解决方案 Isuue

我在用react navigation v6。我想要的是顶部选项卡导航器中的可滚动选项卡？在第 3 方模块中，存在很多问题，这就是为什么我目前不使用它。