네비게이션 내비게이션 내비게이션 콘텐츠를

Question

나는 반응이 매우 새로운 네이티브입니다. 반응 탐색을 사용하여 서랍을 만들려고합니다. DrawerNavigator를 사용할 수는 있지만 모든 화면에 header/navbar를 표시 할 수 없습니다. 그래서 프로필 아이콘, 제목 및 뒤로 아이콘이있는 NavScreen 구성 요소를 만듭니다. 그러나 그들은 제대로 정렬되지 않습니다. 왼쪽에는 프로필 아이콘이, 오른쪽에는 중앙의 제목과 뒤로 버튼이 필요합니다. 내가 어떻게 할 수 있니? 여기

내가 아래의 이미지와 유사 필요 내 코드

const styles = StyleSheet.create({ 
    container: { 
    marginTop: Platform.OS === 'ios' ? 20 : 10, 
    }, 
}); 
const NavScreen = ({ navigation, banner }) => (
    <ScrollView style={styles.container}> 
    <Text>{banner}</Text> 
    <Icon 
     name="ios-contact-outline" 
     size={30} 
     color="#000" 
     onPress={() => navigation.navigate('DrawerOpen')} 
    /> 
    <Icon 
     name="ios-arrow-round-back-outline" 
     size={30} 
     color="#000" 
     onPress={() => navigation.goBack(null)} 
    /> 
    </ScrollView> 
); 

export default NavScreen; 


class App extends React.Component { 
    static navigationOptions = ({ navigation }) => ({ 
    title: `${navigation.state.routeName}`, 
    drawerTitle: `${navigation.state.routeName}`, 
    drawerLabel: 'Home', 
    drawerIcon: ({ whiteColor }) => (
     <MaterialIcons name="drafts" size={14} style={{ color: whiteColor }} /> 
    ), 
    }) 

    render() { 
    const { navigation } = this.props; 
    return (
     <ScrollView> 
     <NavScreen navigation={navigation} banner={'Main'} /> 
     <Text>Main Screen</Text> 
     </ScrollView> 
    ); 
    } 
} 

export default App; 

입니다

Answer 1

첫째, headerRight에서 StackNavigation을 구축하려고하고 headerLeft 당신은 사용자 정의를 정의 버튼 (위)을 사용하여 아이콘/버튼에 필요한 모든 것을 정렬/패딩 할 수 있습니다.

const stackNavigatorConfiguration = { 
    // set first Screen 
    initialRouteName: 'Home', 
    mode: Platform.OS === 'ios' ? 'card' : 'card', 
    navigationOptions: ({navigation}) => ({ 
    headerRight: <DrawerButton navigation={navigation} />, 
    headerLeft: <YourProfileButton navigation={navigation} />, 
    headerBackTitle: null 
    }) 
} 

const YourProfileButton = ({ navigation }) => (
    <TouchableOpacity> 
    <Ionicons 
     style={styles.profileButton} 
     name='ios-menu-outline' 
     size={32} 
     onPress={() => navigation.goBack(null)} 
    /> 
    </TouchableOpacity> 
) 

const DrawerButton = ({ navigation }) => (
    <TouchableOpacity> 
    <Ionicons 
     style={styles.drawerIcon} 
     name='ios-menu-outline' 
     size={32} 
     onPress={() => navigation.navigate('DrawerOpen')} 
    /> 
    </TouchableOpacity> 
)