0

作为 react-native 的新手,我正在尝试找到一种在没有导航栏的情况下使用react-navigation不同文件进行导航的方法(例如,只需单击登录视图中的按钮进入主视图,单击注销按钮返回登录看法)。

使用 react-navigation,我制作了一个全局组件“Nav”,并将其放入主 AppRegistry 调用中:

AppRegistry.registerComponent('myApp', () => Nav);

在 Navigator.js 中:

export const Nav = StackNavigator({
  Login: { screen: LoginView },
  AddStream: { screen: AddStreamView },
});

当我运行时, react-native run-android 我在空白处加载了第一个视图(它应该是导航器,我不想在我的应用程序中使用它)

现在如何从视图中删除 Nav 以及如何更改 View onPress 另一个文件中的按钮组件?

还有另一个包裹可以更好地满足我的愿望吗?

4

1 回答 1

1

从文档中,设置headerModetonone应该可以解决问题。这将隐藏该 StackNavigator 中定义的所有屏幕上的标题。例子:

const Nav = StackNavigator({
    Login: { screen: LoginView },
    AddStream: { screen: AddStreamView },
},{
    headerMode: 'none',
});

如果您想控制标题的可见性,以便它出现在某些屏幕上而不是所有屏幕上,那么您可以headerModescreen每个单独的屏幕集设置 [the navigation prop for header: { visible: false }. 请参阅此处的文档。例如,如果您在另一个文件中创建屏幕组件,它可能如下所示:

// In the main file:
const Nav = StackNavigator({
    Login: { screen: LoginView },
    AddStream: { screen: AddStreamView },
},{
    headerMode: 'screen',
});

// Hidden for your Login screen:
export default class LoginView extends Component {
    static navigationOptions = {
        header: { visible: false }
    }
    // etc...
}

// Visible for your AddStream screen:
export default class AddStreamView extends Component {
    static navigationOptions = {
        header: { visible: true }
    }
    // etc...
}

编辑:错过了问题的第二部分。
要导航到不同的屏幕,您真的应该阅读Hello World 教程,因为它解释了它。具体来说,本节。教程中的相关示例代码:

render() {
    const { navigate } = this.props.navigation;
    return (
        <View>
            <Text>Hello, Chat App!</Text>
            <Button
             onPress={() => navigate('Chat')}
             title="Chat with Lucy"
            />
       </View>
    );
}

在您的情况下,'Chat'将是'Login'or 'AddStream'

于 2017-04-06T00:15:17.550 回答