标签: react-navigation

我一直在尝试从其屏幕调用导航器屏幕中的函数。

为了澄清这一点，这是我的代码片段...

//ScreenA.js
export default class ScreenA extends React.Component {
    showWarning(){
        this.setState({showWarning: true});
        setTimeout(function() {
            this.setState({showWarning: false});
        }.bind(this), 3000);
    }

    render() {
        return (
          <View  style={{backgroundColor : this.state.showWarning ? "#red" : "#blue"}}>
              {this.state.showWarning && <Warning />}
          </View>
        )
    }
}

//Nagigator.js
default export const Navigator = StackNavigator({
  ScreenA: {screen: ScreenA},
  ScreenB: {screen: ScreenB},
});

//App.js
export default class App extends React.Component {
    handleSubmit(qrCode){
        if(qrCodeIsInvalid){
            this.navigator.ScreenA.showWarning();
            //This is just a sudo code.
            //How do we call ScreenA.showWarning here?
        } …

这是包含我的抽屉的组件

export default class StackInView extends React.Component {
  render() {

    const Stack = StackNavigator({
      DrawerStack: { screen: DrawerInView }
    }, {
        headerMode: 'float',
      });

    return (
      <View style={{ flex: 1 }}>
        <Stack />
      </View>
    );
  }
}

以下是我定义按钮的地方。我想在屏幕的 navigationOptions 中定义按钮，因为按钮应该只出现在带有抽屉的屏幕上。但是点击按钮不起作用，你能帮我吗？

... imports ...


export default class DrawerInView extends React.Component {
    static navigationOptions = {
        title: "Yeah?",
        headerRight: <Button title="Menu" onPress={() => {NavigationActions.navigate("DrawerOpen")}}/>
    }

    constructor(props) {
        super(props);
    }

    render() {
        const Drawer = DrawerNavigator({
            "one": {
                screen: () => {
                    return …

我正在使用 React Navigation 的 DrawerNavigation 组件。我正在使用它的contentComponent属性传递一个自定义的抽屉屏幕。但是，我不断收到以下错误：

我知道，我们不应该发布代码的屏幕截图，但我想不出一种从模拟器复制堆栈跟踪的方法。

我检查了 DrawerSidebar.js 文件，它似乎明确地导入了 React。我正在使用最新版本的 react-navigation，这是似乎导致错误的文件。

我在 React Native 中使用react-navigation v2，每当想要返回根导航器中的特定选项卡时都会卡住。

我有以下路线堆栈：

const HomeStack = createStackNavigator(
  {
    Home: Home,
    CreateInvoice: CreateInvoiceScreen,
    InvoiceSummary: InvoiceSummaryScreen,
    PinEntry: PinEntryScreen
  },
  {
    navigationOptions: {
      header: null
    }
  }
);

const CustomersStack = createStackNavigator(
  {
    Customers: CustomersScreen,
    Details: CustomerDetailsScreen
  },
  {
    navigationOptions: {
      header: null
    }
  }
);

const Tab = createBottomTabNavigator(
  {
    Home: HomeStack,
    Transactions: TransactionsTab,
    Customers: CustomersStack,
    Settings: SettingsTab
  }
);

const Routers = createStackNavigator({
  splash: {
    screen: SplashScreen,
    navigationOptions: {...navigationOptions}
  },
  login: {
    screen: LoginScreen, …

我正在为我当前的项目使用 React-Navigation 库，但不喜欢向后滑动功能。只有当您将手指放在屏幕的整个边缘以便手势向后滑动时，它才会被触发。我已经阅读了API 参考，但找不到任何关于我的行为问题的信息。

我有StackNavigator一个带有自定义标头的组件DrawerNavigator。自定义标题有一个按钮，应在按下时切换抽屉。我已经添加了 React Navigation 文档中提供的操作，但不起作用。

可以在这里找到有问题的小吃

我究竟做错了什么？谢谢你。

我最近在使用 react-navigation v3，以便使用createStackNavigator堆栈导航功能。因此，正如预期的那样，它应该在工作状态下返回标题上的默认后退按钮。

但不幸的是，后退按钮呈现完美，但无法正常工作。

下面是我的代码，我已经routes.js为各种导航路线分离了一个文件，并根据其使用情况在屏幕中导入。

import ...
import ...
import ...

class Router extends Component{
  async componentDidMount() {
    await Font.loadAsync({
      //...
    });
  }

  render(){
    return (
      <Navigator />
    )
  }
}

const StackNavigator = createStackNavigator({
    Home: {
        screen: Landing
    },
    Login: {
        screen: Login
    },
    ResetPassword: {
      screen: ResetPassword
    },
    SetPassword: {
      screen: SetPassword
    },
    Signup: {
      screen: Signup
    },
    Dashboard: {
      screen: Dashboard
    },
    MealsRecipe: {
      screen: MealsRecipe
    }
},{
    initialRouteName: 'Home',
    headerLayoutPreset: 'center'
}) …

我有一个 tabBar 导航器，我想用图像替换图标，它可以工作，但是尽管在导航选项中设置了 activeTintColor，但它在聚焦时不会改变，这是代码：

TabBarIcon 组件

export default class TabBarIcon extends React.Component {
  render() {
    return (
      <Image
       source={this.props.source}
       tintColor={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
      />
    );
  }
}

tabBarNavigator 中的图标

  tabBarIcon: ({ focused, tintColor }) => (
    <Image
      focused={focused}
      source={require('/assets/images/icon.png')}
      tintColor={tintColor}
    />
  ),

我的应用程序中有多个屏幕，我使用 CreatStackNavigator 进行导航。如果我第二次访问屏幕，则不会调用构造函数。

假设我有四个屏幕 A、B、C 和 D，目前我在 A。

然后我分别转到C和D屏幕。

现在，如果我再次单击 C，则不会调用 C 的构造函数。

我也使用了 ComponentReceivedMount() 但它没有用。

我的代码是：-

  constructor(props) {
    super(props);
    ToastAndroid.show('heeeelll', ToastAndroid.LONG);
    this.state = {
        drawerOpen: false,
        op: 1,
        cl: '#ffffff',
        swiper: this.renderSwpier,
        showSwiper: false,
        ftc: '#2c3554',
        stc: '#c8c8c8',
        firstTopcolor: 1,
        secondTopColor: 0,
        showview: true,
    }
}

先感谢您。

我正在组装一个 react-native 应用程序，并希望顶部有标签。我正在为选项卡使用createMaterialTopTabNavigator，这很好用。但是，当我在最新的 iPhone 模拟器上运行该应用程序时，标签会渗入传感器栏。在试图解决这个问题时，人们建议使用safeareaview，但它似乎没有关于如何将其与外部选项卡父级结合的任何信息。

你们能提供的任何帮助我将不胜感激。谢谢