标签: react-native-drawer

在我的本机项目中，我使用了DrawerNavigator，从中我导航到SwitchAccount页面。在SwitchAccount页面中，我使用了react-native-tabs中的Tabs。下面是我使用的代码

    render() {
      return (
     <View style={[styles.container]}>
      // Here _renderTab function return component based on selectedService
      {this._renderTab(this.state.selectedService)} 
      <TabBarContainer
          selectedService={this.state.selectedService}
          onTabChange={this._switchService}
        />
     </View>
    ); 
  }

当我单击选项卡时，它会更改状态，然后获得_renderTab函数返回的新组件。一切正常，但我想基于_renderTab函数返回的组件更改Header标题。我该怎么办？有什么办法可以从构造函数更改标题标题吗？以下是我在SwitchAccount页面中的navigationOptions的代码。在那里，我想从构造函数更改标题。

    static navigationOptions = {
    title:'Filter',
    drawerLabel: 'Switch Account',
    drawerIcon: ({ tintColor }) => (
      <Icon
        name='md-switch'
        size={40}
        color='black'
      />
    ),
  };

我正在尝试调整抽屉屏幕中图标和文本之间的空间。

这是一个可以更好解释的图像。

这是我的代码

<Drawer.Navigator screenOptions={(navigation) => ({
        drawerItemStyle: {
           borderRadius: 0,
           width: '100%',
           marginLeft: 0
        }
      })}>
      <Drawer.Screen 
         name="HomeScreen" 
         component={HomeScreen} 
         options={{ 
            headerShown: true,  
            headerTransparent: true, 
            headerTitle: "", 
            title: 'Start Delivery',
            drawerIcon: (({focused}) => <Icon name="car" size={25} color={focused ? "#288df9" : "#777"} style={{padding:0, margin:0}} />)
         }} 
      />
</Drawer.Navigator>

谢谢

我正在开发导航抽屉：

<Drawer.Navigator
    initialRouteName={InitialScreen}
    drawerContent={props => <MyDrawer {...props} />}
    screenOptions={{
        headerShown: true,
    }}>
    <Drawer.Screen name="main" component={MainScreen} />
</Drawer.Navigator>

正如您在上面看到的，我通过实现我自己的组件来自定义抽屉的内容MyDrawer。

在渲染部分MyDrawer，我有：

return (
    <View style={styles.myContent}>
      <DrawerContentScrollView
        style={{flex: 1, top: 0, bottom: 0, backgroundColor: 'yellow'}}
        {...props}>
        <View
          style={{
            backgroundColor: 'green',
            flex: 1,
            width: '100%',
            height: '100%',
          }}>
          <View>
            <DrawerItem name="Purhcase" text="Purchase" />
            <DrawerItem name="Sell" text="Sell" />
          </View>
          ...
        </View>
      </DrawerContentScrollView>
    </View>
  );

const styles = StyleSheet.create({
  myContent: {
    flex: 1,
    paddingLeft: 0,
    paddingTop: 10,
  }
});

我想要通过填充整个高度View来直接包裹绿色组件。上面的代码显示了我尝试过的内容，但无论我做什么，绿色 …

我需要使用 React Native Reanimated 创建抽屉动画（https://www.npmjs.com/package/react-native-reanimated）。

在更新插值方法之前，使用 2 个参数可以正常工作。其用法如下

interpolate(
   props.progress,
   {
    [0, 1],
    [1, 0.85],
    Extrapolate.CLAMP
   }
);

但更新后，该方法将采用 3 到 4 个参数

interpolate(
   props.progress,
   [0, 1],
   [1, 0.85],
   Extrapolate.CLAMP
);

现在我收到如下错误

Argument of type 'AnimatedNode<number>' is not assignable to parameter of type 'number'

我当前的 React Native Reanimated 版本是 2.1.0

通过 DrawerContent(DrawerContentComponentProps) 传递 Props，如下所示

drawerContent={(props) => {
            const scale = interpolate(
              props.progress,
              [0, 1],
              [1, 0.85],
              Extrapolate.CLAMP
            );

            const borderRadius = interpolate(
              props.progress,
              [0, 1],
              [0, 10],
              Extrapolate.CLAMP …