使用不同的文件进行原生导航-Java 学习之路

作为反应原生的新手，我正在尝试找到一种方法来使用 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 我得到第一个视图加载在一个空白区域（它应该是导航器，我不想在我的应用程序中）

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

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

1 回答

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

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

如果要控制 Headers 的可见性以使其显示在某些屏幕上而不是所有屏幕上，则可以将 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' .

回复于 2024-05-09T08:32:02+08:00

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

1 回答

相关问题