用不同的文件反应本机导航答案

【问题标题】：react native navigate with different files用不同的文件反应本机导航
【发布时间】：2017-08-31 18:16:32
【问题描述】：

作为 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 我在空白处加载了第一个视图（它应该是导航器，我不想在我的应用程序中使用它）

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

还有一个更能满足我愿望的套餐吗？

【问题讨论】：

标签： javascript reactjs react-native react-navigation

【解决方案1】：

From the docs，将headerMode 设置为none 应该可以解决问题。这将隐藏该 StackNavigator 中定义的所有屏幕上的标题。示例：

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

如果您想控制标题的可见性，使其出现在某些屏幕上而不是所有屏幕上，那么您可以将headerMode 设置为screen 并为每个单独的屏幕设置[导航道具header: { visible: false }。 See docs here。例如，如果您在另一个文件中创建屏幕组件，它可能如下所示：

// 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...
}

编辑：错过了问题的第二部分。
要导航到不同的屏幕，你真的应该通过the Hello World tutorial 来解释它。具体来说，this section。教程中的相关示例代码：

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

在您的情况下，'Chat' 将是 'Login' 或 'AddStream'。

【讨论】：