2017-04-05 2 views
0

반응 네이티브에서 초보자로서 navbar없이 네비게이션없이 다른 파일들과 함께 react-navigation을 사용하는 방법을 찾으려고합니다. (예를 들어, 로그인보기에서 버튼을 클릭하여 메인 보기, 로그 아웃 단추를 클릭하면 로그인보기로 돌아 감). 반응-탐색다른 파일 네이티브 네비게이션

난 글로벌 부품 탐색 '을 만들고 난 메인 AppRegistry 호출 배치 :

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

Navigator.js 중에 :

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

react-native run-android 공백으로로드 된 첫 번째보기가 표시됩니다 (내 응용 프로그램에서는 원하지 않는 탐색기 여야합니다)

보기에서 탐색을 제거하려면 어떻게해야합니까? 다른 파일의 버튼 구성 요소를보기로 변경하려면 어떻게해야합니까?

내 욕망을 채워주는 또 다른 패키지가 있습니까?

답변

1

From the docs으로 설정하려면 headerModenone으로 설정해야합니다. 그러면 해당 StackNavigator에 정의 된 모든 화면의 머리글이 숨겨집니다. 예 : 당신이 화면의 일부에 나타납니다 전부는 아니지만 그들 있도록 헤더의 가시성을 제어하려면

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

, 다음 screenheaderMode을 설정하고 각각의 화면 세트 [탐색 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'이 될 것입니다.

+0

정말로 감사합니다. 튜토리얼에서 그 부분을 놓쳤습니다! – Pesti