Question

我想在一个屏幕上显示Side_Drawer上列出的不同屏幕。我不想为每个屏幕创建相同的布局更改，因此，当用户单击列表时，屏幕的中心部分将相应更改，其他布局将保持不变。

这是我的屏幕A，其中内容随着状态的改变而变化。

success

这是我的Side_Drawer，它是ScreenA抽屉上的列表，我想从此处更改屏幕A的switchScreen函数的索引，以及要显示屏幕C的列表的onPress。

   class ScreenA extends Component {
      constructor(props) {
        super(props)
        this.state = { index: 0 }; // default screen index
      }
          switchScreen(index) {
            this.setState({ index: index })
          }
      render() {
        let AppScreen = null;

        if (this.state.index == 0) {
          AppScreen = Screen1
        } else if (this.state.index == 1) {
          AppScreen = Screen2
        } else if (this.state.index == 2) {
          AppScreen = ScreenC        }

        return (
          <Drawer ref={(ref) => { this.drawer = ref; }}
            content={<Side_Drawer navigator={this.navigator} />}
            onClose={() => this.closeDrawer()} >
             <Container>    
             <Button
                onPress={() => this.switchScreen(1)}/>

<AppScreen />
             <Containert/>        
            </Drawer>  
        );
      }
    }

我想要一个单屏幕应用程序，在该应用程序中，屏幕所需的唯一部分将发生变化，否则将保持不变。

Answer 1

传递参数以供使用。

您可以将其移至侧边菜单，因为您有屏幕数据可移至AppScreen。

content={<Side_Drawer navigator={this.navigator} move={AppScreen} />}

Side_Drawer 强文本

<Text onPress={()=>this.props.navigation.navigate(this.props.move)}>

如何在React Native中使用来自另一个类的参数调用函数？

1 个答案: