對不同文件進行本機導航

Question

作為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我在空白空間下加載了第一個視圖（它應該是導航器，我不想在我的應用中）

現在如何從視圖中刪除導航，如何更改另一個文件中的View onPress按鈕組件？

還有另一個包裹可以更好地滿足我的需求嗎？

Answer 1

從docs ，將headerMode設置為none應該可以解決問題。 這將在該StackNavigator中定義的所有屏幕上隱藏標題。 例：

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

如果要控制標題的可見性以使其顯示在某些屏幕上，而不是全部顯示在屏幕上，則可以將headerMode設置為screen並為每個單獨的屏幕設置[ header: { visible: false }的導航道具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'或'AddStream' 。