标签: react-navigation

有一点令人困惑的是路由名称和密钥之间的区别以及为什么要使用一个与另一个相比.并且,如何处理重复的路由名称.

此文档说您用于routeName导航到屏幕,这key是"用于对路径进行排序的唯一标识符".那是什么意思？

看起来路由名称不必是唯一的,如我的例子中所示,因为外部选项卡和内部堆栈具有相同的路由名称.当您使用导航功能时 - 您传递路线名称,对吗？如果是这样,它如何区分嵌套导航器中的重复路径名称以及何时使用该键？

        export TabsNavigator = TabNavigator({
          Home: {
            screen:StackNavigator({
              Home: { screen: HomeScreen },
            }),
          },
          Profile: {
            screen: StackNavigator({
              Profile: { ProfileScreen },
            }),
          },
        });

文档中有一个设置密钥的示例,但我无法理解它正在尝试执行的操作的上下文,或者为什么要在实际用例中执行此操作.

import { NavigationActions } from 'react-navigation'

const setParamsAction = NavigationActions.setParams({
  params: {}, // these are the new params that will be merged into the existing route params
  // The key of the route that should get the new params
  key: 'screen-123',
})
this.props.navigation.dispatch(setParamsAction)

我看到很多人在反应导航问题部分使用this.props.navigation.dispatch以编程方式导航.是否有任何特定的原因或用例使用它this.props.navigation.navigate？

看起来您可以将更多选项传递给调度函数？还有别的事吗？您是否可以在没有明确地将反应导航绑定到您的应用程序redux商店的情况下使用调度？现在我有一个具有redux的应用程序,但我没有明确配置我的redux设置以了解react-navigation(如果可以的话,我更愿意保持这种方式).

我在反应原生项目中使用反应导航,我想用图像自定义标题.

对于一种颜色,我可以使用简单的样式,但由于本机反应不支持背景图像,我需要一个不同的解决方案.

我正在使用React-Navigation并且我有一个StackNavigator,这是带有Stack + Tabs Navigator的app.js:

import React from 'react';
import { AppRegistry } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

import LoginScreen from './app/screens/LoginScreen';
import RegisterScreen from './app/screens/RegisterScreen';
import HomeScreen from './app/screens/HomeScreen';
import FriendsScreen from './app/screens/FriendsScreen';

const Stylelist = StackNavigator({
  Login:{
     screen: LoginScreen,
     navigationOptions: ({navigation}) =>({
       header: null,
     }),
  },
  Register:{
      screen: RegisterScreen,
      navigationOptions: ({navigation}) =>({
        header: null,
      }),
  },
  Home:{
     screen: HomeScreen,
     navigationOptions: ({navigation}) =>({
       title: "Home",
     }),
  },
});

const TabsNav = TabNavigator({
  Home: {
    screen: HomeScreen, …

我是React Native的新手.我正在使用React-Navigation.但是,在我的设备上有标题导航问题.这样覆盖状态栏就像这样.

我的代码和React Navigation展示示例都会出现此问题.怎么解决？谢谢

我有两个组件(列表和详细信息):

List.js:

export default class List extends React.Component {
    render() {
        const {navigate} = this.props.navigation;
        return (
            <View style={styles.container}>
                <Text style={styles.headerText}>List of Contents</Text>
                <Button onPress={()=> navigate('Detail')} title="Go to details"/>
            </View>
        )
    }
}

Detail.js:

export default class Detail extends React.Component {
    render() {
        return (
            <View>
                <Text style={styles.headerText}>Details of the content</Text>
            </View>
        )
    }
}

我想有两个屏幕(NowList和SoonList)基本上是相同类型的列表,所以我对屏幕使用相同的List组件.从这些屏幕中的每个屏幕,我想导航到项目的详细信息,在这种情况下也具有相同类型的布局,因此我对列表项使用了Detail组件.

最后,当应用程序启动时,我希望显示NowList屏幕.使用抽屉我想导航到SoonList屏幕.

我不知道如何配置这条路线.但是,这就是我现在配置路线的方式:

const NowStack = StackNavigator({
    NowList: {
        screen: List,
        navigationOptions: {
            title: 'Now',
        }
    },
    Detail: {
        screen: Detail,
        navigationOptions: {
            title: 'Detail', …

我相对确定我发现这是不可能的，但是我想确保没有办法。

有问题的应用程序从AppNavigator开始StackNavigator。

export const AppNavigator = StackNavigator({
    Login: {
        screen: Login,
        navigationOptions: ({navigation}) => ({
            title: 'Aanmelden',
            params: {
                nuke: navigation.state.params && !!navigation.state.params.nuke,
            },
        }),
    },
    Main: {
        screen: DynamicTabBar,
        navigationOptions: ({navigation}) => ({
            title: 'Follow-up',
        }),
    },
}, {
    mode: 'modal',
    headerMode: 'none',
});

export class AppWithNavigationState extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <AppNavigator navigation={addNavigationHelpers({ dispatch: this.props.dispatch, state: this.props.navigationReducer })} />
    }
}

AppWithNavigationState.propTypes = {
    dispatch: React.PropTypes.func.isRequired,
    navigationReducer: React.PropTypes.object.isRequired,
};

const mapStateToProps …

我正在使用核心React Native Modal组件。在模态内容中，我有一个Done按钮。

按下Done是我们希望用户关闭模式的唯一方法。但是Modal组件允许从屏幕顶部向下滑动以关闭。

如何关闭“滑动关闭”功能？

iOS会自动填充第一个密码字段,但不会填写第二个密码字段.如何在应用程序中自动填写密码和确认密码字段？

更新:似乎系统将注册表单视为登录表单,因此它会自动填充第一个密码字段.此外,当我导航回登录屏幕时,系统会提示我是否要在钥匙串中保存密码,这是意料之外的.

更新:我正在使用堆栈导航(屏幕:登录和注册).在我以注册形式输入姓名或电子邮件后,它会自动填写登录屏幕的密码字段和注册屏幕的第一个密码字段的强密码.有什么办法告诉系统那些是不同的形式？(就像<form>在网络编程中使用不同).

登录屏幕

export default class Login extends Component {
    Login() {

    }

    render() {
        return (
            <IndexBackground>
                <IndexBox>
                    <IndexLogo />
                    <IndexTextInput placeholder="Name" />
                    <IndexTextInput placeholder="Password" secureTextEntry={true}/>
                    <IndexButton title="Log in" onPress={this.Login} />
                    <IndexText text="Forgot Password?" style={styles.textForgot} />
                    <IndexText text="Don't have an account?" style={styles.textSignUp}>
                        <Text style={styles.textLink} onPress={() => this.props.navigation.navigate('SignUp')}> Sign up</Text>
                    </IndexText>
                </IndexBox>
            </IndexBackground>
        )
    }
}

注册屏幕

export default class SignUp extends Component {
    user = {
        email: '',
        name: '',
        pass: '',
        confirmpass: ''
    };

    setUser …

正如您在下面看到的，我尝试了多种将背景颜色设置为绿色的方法，但都无济于事。背景像图像一样保持蓝色。

在inactiveColor和activeColor正在（白色，分别为红色）。

<NavigationContainer>

  <Tab.Navigator
    initialRouteName="HomeScreen"
    activeColor="red"
    inactiveColor="white"
    activeBackgroundColor="green"
    inactiveBackgroundColor="green"
    style={{ backgroundColor: 'green' }}
    tabBarOptions={{
      style:{
        backgroundColor: 'green'
      }
    }}
  >

    <Tab.Screen
      name="HomeScreen"
      options={{
        tabBarLabel: 'Home',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="home" color={color} size={26} />
        ),
      }}
    >
    {props => <HomeScreen {...props} state={this.state} />}
    </Tab.Screen>

    <Tab.Screen
      name="Files"
      component={FilesScreen}
      options={{
        tabBarLabel: 'Files',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="file" color={color} size={26} />
        ),
      }}
    />

  </Tab.Navigator>

</NavigationContainer>

包.json

"dependencies": {
  "@react-native-community/masked-view": "^0.1.7",
  "@react-navigation/material-bottom-tabs": "^5.1.7",
  "@react-navigation/native": …