反応したネイティブのnavscreenコンテンツを整列する

Question

私は非常に反応ネイティブです。私は反応ナビゲーションを使用して引き出しを作成しようとしています。私はDrawerNavigatorを使うことができましたが、すべての画面にヘッダー/ナビゲーションバーを表示できませんでした。そのため、私はプロファイルアイコン、タイトル、および戻るアイコンで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> 
)