标签: react-navigation

我使用反应导航。我有一个TabNavigator。每个Tab包含一个StackNavigator. 从一个StackNavigator，可以打开一个Modal。\nModal当我点击Button某个特定的a 时，就会打开Componenta 时，会打开该文件。

export default class CallModalComponent extends Component {\n    constructor(props) {\n        super(props)\n    ...\n    }\n\n    ...\n\n    render()\xc2\xa0{\n    const { navigate } = this.props.navigation;\n         return (\n              <Button\n               ....\n               onPress={() => navigate("Modal")}/>\n

TabNav注册屏幕中的<MyModal />是一个有状态的Component。\n关闭时Modal我需要将state传递<MyModal />给<CallModalComponent />。

我遇到的问题是这react navigation之间如何工作...我知道我可以redux通过global store. 但我想知道是否可能仅react …

我花了超过 si 个小时尝试将 DrawerNavigator 的背景更改为透明，但没有成功。当我在主要组件中更改它时写入它可以工作

const MainTabBarDrawer = DrawerNavigator({
Home:{
    screen:MainTabNavigator,
},

},{
drawerWidth: 200,
drawerPosition: 'right',
// contentComponent: props => <Text style={{color:'white'}} >text 
</Text>,
drawerBackgroundColor: 'yellow',
//backgroundColor:'transparent',
// style: {
// //backgroundColor: 'transparent',
// flex: 1
// },
// contentOptions: {
//     style: {
//     backgroundColor: 'transparent',
//     flex: 1
// }


},
{
style: {
    backgroundColor: 'transparent',
        flex:1
}
}
)


class App extends Component{

render()
{
return(<MainTabBarDrawer style={{backgroundColor: 'transparent'}}/>)
//return(<Login/>)
}

}

虽然上述方法可行，但我的布局非常复杂，我不希望抽屉出现在我的所有视图中。那么有人知道我是否可以直接更改 DrawerNavigator 的背景而不将其渲染为组件吗？

如何自定义 React Navigation 的 headerLeft TabNavigator。
这是我的屏幕之一：

Back我想从 中删除headerLeft
可以吗？
这是我的代码：

DetailTabs = TabNavigator({
DetailResult:{
    screen:DetailResult,
    navigationOptions:{
        title:'Detail Penginapan',
        headerTitleStyle:{
            fontSize:14,
            textAlign: "center",
            flex: 1,
        },
        tabBarVisible: false,
        headerStyle:{
            backgroundColor:'#4A94FB',
            borderBottomColor: 'transparent',
        },
        headerTintColor: 'white'
    }
}
})

我一直在尝试获取标签栏的背景图像。我尝试使用tabBarComponent，但它隐藏了其下的选项卡。

我正在使用的代码是

   export default MainNavigation = createBottomTabNavigator(
    {
        Profile:{
            screen: Profile,
            navigationOptions: ({ navigation }) => ({
                tabBarIcon: ({ focused, tintColor }) => {
                    return <Image source={require('./images/tab_explore.png')} />
                }
            }),
        }
    },

    {
        tabBarComponent: props =>{
            return(
                <View style={{backgroundColor:"black"}}> 
                <Image
                    style={{ width:'100%', height: 80 }}
                    source={ require('./images/bottom_btn.png')} />
                </View>
            );
        }
    })

有谁知道如何解决这个问题？提前致谢！

电流输出：

它应该在橙色顶部显示选项卡。

我的堆栈导航器为 -

export const Routes = StackNavigator({
    Login: {
        screen: Login,
    },
    Flights: {
        screen: Flights,   
    },
    Payment: {
        screen: Payment,
    }
}, {
        initialRouteName: 'Login'
    }
)

流程为登录->航班->支付。

航班屏幕会调用 API 来获取航班。我有逻辑让航班停靠componentDidMount()。但是，当我从“付款”返回“航班”时，我想再次进行 API 调用。

我的问题是，如何在每次打开“航班”屏幕时执行此 API 调用逻辑？

对不起，我的英语不好。我已经构建了一个导航栏，没有使用 React Navigation 中的选项卡导航，一切正常，除了当我尝试设置“活动”图标时，我已经用状态处理了它，但是当我导航到另一个窗口并再次渲染栏时，状态会重新启动导航。

我想我把它弄复杂了一点，但我需要捕获活动屏幕以将其作为状态传递，并将图标的颜色更改为“活动”，其他图标被禁用。我尝试过检测活动屏幕和 onDidFocus，但我只收到有关转换的信息，我需要屏幕的名称或 ID。

我留下我的代码（该组件被导出到我希望有导航栏的每个页面）。请注意，我们的想法是不要使用 React Native Navigation 中的选项卡导航。

export default class Navbar extends Component {

/** Navigation functions by clicking on the icon (image) */
_onPressHome() {
    this.props.navigation.navigate('Main');
}

_onPressSearch() {

    this.props.navigation.navigate('Main');
}

render() {
    const { height, width } = Dimensions.get('window');
    return (
        <View style={{ flexDirection: 'row', height: height * .1, justifyContent: 'space-between', padding: height * .02 }}>
            /** Icon section go Home screen */
            <View style={{ height: height * .06, alignItems: 'center' }}>
                <TouchableOpacity …

我正在尝试使用反应导航，但遇到一些问题。我看不出有什么问题。我怎么解决这个问题？

到目前为止我已经尝试过：

• 重启模拟器（PC）
• 重写所有代码

• 创建了一个新项目并在那里尝试了该代码。

  import React, {Component} from 'react';
  import {StyleSheet,Text,View} from 'react-native';
  import {createStackNavigator,createAppContainer} from "react-navigation";
  
  
  
  class HomeScreen extends Component {
    render() {
      return (
          <View style={styles.container}>
            <Text>Home</Text>
          </View>
      );
    }
  }
  
  export default  class App extends  Component{
    render(){
      return(
    <AppContainer />
      );
    }
  
  }
  
  const AppNavigator = createStackNavigator({
    Home:{
      screen: HomeScreen
    }
  
  
  });
  const AppContainer = createAppContainer(AppNavigator);
  
  const styles=StyleSheet.create({
    container:{
      flex:1,
      justifyContent:'center',
      alignItems:'center',
      backgroundColor:'#F5FCFF',
    }
  
  });
  

  Run Code Online (Sandbox Code Playgroud)

我正在使用React 导航库。我编写了一个自定义抽屉菜单并将其添加到导航器的contentComponent配置中。我不知道如何确定自定义菜单中哪个页面/屏幕处于活动状态。这是我的DrawerNavigator代码：

const DrawerNavigator = createDrawerNavigator({
    "Search Locations": {
        screen: SearchLocationsScreen,
    },
    "About": {
        screen: AboutScreen
    },
    "Favorites": {
        screen: FavoritesScreen
    },
    "Sign In": {
        screen: SignIn
    },
}, {
    contentComponent: props => <CustomDrawerComponent {...props} />
});

可能需要注意的是，我的DrawerNavigator嵌套在StackNavigator内。我将导航选项导出到一个单独的文件，如下所示：

export default (navigation) => {
    const {state} = navigation;
    let navOptions = {};

    if(state.index === 0){
        navOptions.headerRight = (
            <TouchableOpacity>
                <MaterialIcons
                    name="my-location"
                    size={32}
                    color="#fff"
                    style={{paddingRight: 10}} />
            </TouchableOpacity>
        )
    }

        if (state.isDrawerOpen){ …

我有一个带有堆栈导航器的简单应用程序。其导航方式如下

Screen A --> Screen B --> Screen C --> Screen D

我在屏幕 B 中添加了一个后台处理程序，如下所示

componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
}

它在屏幕 B 上按预期工作。导航到 C 或 D 时，硬件按钮不会导致分别导航回 B 或 C。相反，它似乎会触发屏幕 B 中的handleBackButtonClick。我怎样才能避免这种情况？

我已经像本文档所述编写了类型定义，但是当我使用嵌套导航时出现了问题。

这里是示例代码：

在我的App.tsx

export type MainStackParamList = {
  Setting: undefined
}
export type TabParamList = {
  Home: undefined
  Personal: undefined
}
const MainStack = createNativeStackNavigator<MainStackParamList>()
const Tab = createBottomTabNavigator<TabParamList>()
const RootStack = createNativeStackNavigator()

const MainStackScreen = () => (
  <MainStack.Navigator screenOptions={{ headerShown: false }}>
    <MainStack.Screen name="Setting" component={Setting} />
  </MainStack.Navigator>
)

const TabScreen = () => (
  <Tab.Navigator screenOptions={{ headerShown: false }}>
    <Tab.Screen name="Home" component={Setting} />
    <Tab.Screen name="Personal" component={Setting} />
  </Tab.Navigator>
)

const RootStackScreen = () => ( …