标签: react-native-router-flux

当我在react-native项目中安装NativeBase和React-Native-Router-Flux时,我收到此错误:

Failed to build DependencyGraph: @providesModule naming collision:
  Duplicate module name: react-native-vector-icons
  Paths: /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/local-cli/core/__fixtures__/files/package.json collides with /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native-router-flux/node_modules/react-native/local-cli/core/__fixtures__/files/package.json

This error is caused by a @providesModule declaration with the same name across two different files.
Error: @providesModule naming collision:
  Duplicate module name: react-native-vector-icons
  Paths: /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/local-cli/core/__fixtures__/files/package.json collides with /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native-router-flux/node_modules/react-native/local-cli/core/__fixtures__/files/package.json

This error is caused by a @providesModule declaration with the same name across two different files.
    at HasteMap._updateHasteMap (/Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:159:13)
    at p.getName.then.name (/Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:134:31)

我正在使用react-native-router-flux 4.0.0-beta.17作为我的学习项目.我需要自定义标题.例如背景颜色,标题对齐等.我找不到关于它的好文档.其中一个有类似的东西

 <Router sceneStyle={{backgroundColor: '#81b71a'}}>
     <Scene key="root">
        <Scene key='login' component={LoginForm} title='Please Login :)' />
     </Scene>
 </Router>

但它没有做任何事情.

请给我一些关于好文档的参考,如果可能的话,请给我一些关于如何设置路由器样式的信息.我在哪里可以找到一份全面的文件？

我正在创建一个内部布局。我是从另一个场景来到这个场景的。所以在开始时呈现另一个布局。在我进入第二个场景（带有 TextInput 标签）后，我收到如下警告：

componentWillMount 已弃用，将在下一个主要版本中删除。请改用 componentDidMount。作为临时解决方法，您可以重命名为 UNSAFE_componentWillMount。请更新以下组件：App、Container、Image、Text< TouchableOpacity、Transitioner、View。

这很奇怪，因为我没有使用 componentWillMount 方法，所以我猜它是隐式调用的。

这是组件的代码

 class MainTopBarAfterSearch extends Component {
constructor() {
    super();
    this.state = { text: " " };
}

render() {
    const { topBarContainer, imageStyle, textInputStyle } = styles;
    return (
        <View style={topBarContainer}>
            <TouchableOpacity onPress={() => Actions.menu()}>
                <Image
                    source={require("../../../resources/menuWhite.png")}
                />
            </TouchableOpacity>
            <TextInput
                style={textInputStyle}
                placeholder="Begin to search"
                value={this.state.text}
                onChangeText={text => this.setState({ text })}
            />
            <Image source={require("../../../resources/filter.png")} />
        </View>
    );
}
}

我使用 react native 和 react-native-router-flux 进行导航

当我想移动屏幕时，出现错误“currentlyFocusedField 已弃用，将在未来版本中删除。使用 currentFocusedInput”

但屏幕仍然因错误而移动

我如何解决它

这是我的路由器

    import 'react-native-gesture-handler';

import React, { Component } from 'react';
import {
    Router,
    Scene,
    Stack,
} from 'react-native-router-flux';

import Loading from '../screens/Loading';
import Welcome from '../screens/Welcome';
import Register from '../screens/Auth/Register';

export default class RouterLinked extends Component {
    render() {
        return (
            <Router>
                <Stack key="root" type="replace">
                    <Scene key="Welcome" component={Welcome} initial={true} hideNavBar={true}/>
                    <Scene key="Register" component={Register} title="Register" />
                    <Scene key="Loading" component={Loading} />
                </Stack>
            </Router>
        );
    }
}

这是我的主页

import React, { Component …

我想在查看某些页面时添加汉堡菜单按钮,并在所有页面上显示右侧按钮.这可能与react-native-router-flux有关吗？

更新:通过使用此代码,我可以毫不费力地获得右侧按钮

<Scene key="home"
       component={HomePage}
       hideBackImage={true}
       ...
       rightButtonImage={HelpIcon}
       onRight={()=>{}}
       rightTitle={null}
       rightButtonIconStyle={{ width: 44, height: 44 }} />

汉堡菜单按钮证明更加困难.导航栏上有一个drawerImage属性,但没有关于如何使该drawerImage出现的其他文档以及如何设置处理函数.

我尝试设置rightButtonImage,onRight rightTitle和rightButtonIconStyle的方式与左键相同,但没有按钮出现.

更新2:由于此问题,我降级为react-native-router-flux v3.34.0:https://github.com/aksonov/react-native-router-flux/issues/1154

并将这些道具添加到我的场景中:

...
renderBackButton={()=>{ return null; }} /* Hide the back button...goofy mechanism but it works */
leftButtonImage={NavigationBurgerIcon}
onLeft={()=>{}}
leftTitle={null}
leftButtonIconStyle={{ width: 30, height: 30 }}
...

我有一个Router有2个标签场景的设置:

• 标签1:有2个可导航的场景(静态屏幕);
  • 屏幕A:有一个导航到屏幕B的按钮;
  • 屏幕B:只有一个文字;
• 标签2:只有1个静态屏幕.
  • 屏幕C:只有一个文字;

代码如下.

app.js:

import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import Tab from '../tab';
import ScreenA from './a';
import ScreenB from './b';
import ScreenC from './c';


export default class App extends React.Component {
  render(){
    return (
      <Router>
        <Scene key="root">
          <Scene key="tabbar" tabs={true}>

            <Scene key="tab1" title="Tab 1" icon={Tab}>
              <Scene key="a" title="Screen A" component={ScreenA} />
              <Scene key="b" title="Screen B" component={ScreenB} />
            </Scene>

            <Scene key="tab2" …

我正在使用React-Native-Router-Flux(V.3.37)来构建Android应用程序,我正在尝试创建嵌套场景.使用DefaultRenderer元素我已经能够创建一个嵌套的场景,但我希望它有多个并且能够在它们中导航.

我的index.android.js看起来像这样(在Router和Scene key ="root"元素中).

<Scene
   key="outer"
   component={Outer}
   title="Outer"
   initial
   hideNavBar
 >
    <Scene
      key="inner1"
      component={Inner1}
      title="Inner1"
      hideNavBar
    />
    <Scene
      key="inner2"
      component={Inner2}
      title="Inner2"
      hideNavBar
     />
</Scene>

外部组件是这样的:

<View style={styles.container}>
   <View style={styles.smallContainer}>
      <DefaultRenderer 
         navigationState={this.props.children[0]}
         onNavigate={this.props.onNavigate}
      />
   </View>
</View>

像这样,Inner1组件将正确嵌套在Outer组件的smallContainer视图中.但我不知道如何导航到Inner2.如果我只是硬编码this.props.children [1]作为navigationState,它告诉我"navigationState和onNavigate属性应该不为null".

如果我在Inner1中使用onPress = {Actions.inner2}放置TouchableHighlight,它就什么都不做.

我的直觉告诉我,答案在于Outer组件中DefaultRenderer元素中的onNavigate = {this.props.onNavigate}属性,但我一直无法找到有关它的任何信息.我刚刚从React-Native-Router-Flux的示例文档中深入复制了DefaultRenderer元素.

我还研究了React-Native-Simple-Router,React-Native-Router和React-Router-Native,但它们中没有一个显然更好.

我似乎无法找到任何完整的示例来创建自己的navBar组件,然后连接到它react-native-router-flux.谁能帮我吗？看看github问题,似乎这对图书馆来说是一个很大的需求.我想要做的是:

• 使用左按钮和右侧图像创建一个新组件.
• 按钮图标会根据场景而改变,但使用相同的图像.
• 将其连接到react-native-router-flux,以便navBar正确显示并以与默认navBar相同的方式跟踪用户位置.

谢谢!

如何根据用户登录状态在react-native-router-flux中设置初始场景.这是我想要实现此功能的代码.如果用户登录,我想要场景2,如果用户没有登录,我想要场景1.

我遇到这个代码的问题它总是返回第一个屏幕而不是场景2我有用户登录状态.

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import Scene1 from '../Scene1';
import Scene2 from '../Scene2';

// localization strings
import strings from '../config/localization';

import styles from './Styles';

class Routes extends Component {
  state = {
    isUserLogin: false
  }
  async componentDidMount() {
    await AsyncStorage.getItem('user', (err, result) => {
      if (result != null) {
        this.setState({ isUserLogin: JSON.parse(result).isUserLoggedIn });
      }
      if (__DEV__) {
        console.log('routes', this.state); // return trur or false if user logged in or …

我的应用程序中的导航感觉有点卡顿，因为在初始化和第一次渲染调用完成之间，页面总是有一段时间（即使只是一瞬间）是空的。

我已经尽我所能确保组件可以尽可能快地呈现。我已经缓存了我的图像，并且在导航到我的 redux 存储中的组件之前所有数据都可用。我得到之间51ms的记录的时间 constructor 和componentDidMount这似乎微不足道，但它是不够，你可以直观地看到组件Flash到屏幕上。

我想知道是否有办法预加载组件并确保在显示屏幕之前呈现它。由于这是一个 react-native 应用程序，据我所知，我不能只是“在屏幕外渲染”然后在我准备好时使用它，但我可能是错的。然而，我们也不希望我们所有的屏幕都被不断渲染。

能够做类似的事情..

Preloader.preload(<MyComponent />) .then(navigate('myComponent'))

真的会很好。有时组件有很大的列表，需要一段时间来呈现。当视图滑入屏幕时，列表已经在那里，这会让应用程序的流程感觉好多了。