Question

作为反应原生的新手，我试图找到一种方法将react-navigation用于不同的文件而不使用导航栏进行导航（例如，只需点击登录视图中的按钮即可进入主界查看，点击退出按钮返回登录视图）。

通过反应导航，我创造了一个全球性的组件＆＃39; Nav＆＃39;我把它放在主要的AppRegistry调用中：

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

在Navigator.js中：

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

我跑的时候 react-native run-android 我得到第一个加载在空白区域的视图（应该是导航器，我不想在我的应用程序中加载）

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

还有另一个包装更能满足我的需求吗？

Answer 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'。

使用不同的文件进行原生导航

1 个答案: