Question

案例是我有三个屏幕，显示从API获取的结果，并允许用户对这些结果分派操作。这些动作触发（应该）导致其他两个屏幕。换句话说，如果用户在任何屏幕上并执行某些操作，则其他两个屏幕应该更新。

例如，屏幕A，B和C.我可以采用以下两种方法之一：

- 有条件渲染：

class MainScreen extends Component {
    state: Object;

    constructor(props) {
        super(props);

        this.state = { currentActiveScreen: 1 }
    }

    componentWillMount()
    {
        this.retrieveResultForScreenA();
        this.retrieveResultForScreenB();
        this.retrieveResultForScreenC();
    }

    retrieveResultForScreenA()
    {
        // get results from API
    }

    retrieveResultForScreenB()
    {
        // get results from API
    }

    retrieveResultForScreenC()
    {
        // get results from API
    }

    ChangeScreen(screen_number)
    {
        this.setState({currentActiveScreen: screen_number});
    }

    render() 
    {
        if(this.state.currentActiveScreen === 1)
        {
            // render screen A results
            // along with a tab bar to switch screens:

            <View style={{flexDirection: "row"}}>
                <TouchableOpacity onPress={()=>{ this.ChangeScreen.bind(this, 1) }}>
                    <Text>ScreenA</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{ this.ChangeScreen.bind(this, 2) }}>
                    <Text>ScreenB</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{ this.ChangeScreen.bind(this, 3) }}>
                    <Text>ScreenC</Text>
                </TouchableOpacity>
            </View>

        }

        if(this.state.currentActiveScreen === 2)
        {
            // render screen B results
            // along with a tab bar to switch screens:

            <View style={{flexDirection: "row"}}>
                <TouchableOpacity onPress={()=>{ this.ChangeScreen.bind(this, 1) }}>
                    <Text>ScreenA</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{ this.ChangeScreen.bind(this, 2) }}>
                    <Text>ScreenB</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{ this.ChangeScreen.bind(this, 3) }}>
                    <Text>ScreenC</Text>
                </TouchableOpacity>
            </View>
        }

        if(this.state.currentActiveScreen === 3)
        {
            // render screen C results
            // along with a tab bar to switch screens:

            <View style={{flexDirection: "row"}}>
                <TouchableOpacity onPress={()=>{ this.ChangeScreen.bind(this, 1) }}>
                    <Text>ScreenA</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{ this.ChangeScreen.bind(this, 2) }}>
                    <Text>ScreenA</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{ this.ChangeScreen.bind(this, 3) }}>
                    <Text>ScreenA</Text>
                </TouchableOpacity>
            </View>       
        }
    } 
}

- TabNavigator有三个屏幕：

class ScreenA extends Component {

    static navigationOptions = ({ navigation }) => ({ title: 'ScreenA' });

    constructor(props) {
        super(props);
    }

    componentWillMount()
    {
        this.retrieveResultForScreenA();
    }

    retrieveResultForScreenA()
    {
        // get results from API
    }

    render() {
        return (
            // render screen A results
        );
    }
}

class ScreenB extends Component {

    static navigationOptions = ({ navigation }) => ({ title: 'ScreenB' });

    constructor(props) {
        super(props);
    }

    componentWillMount()
    {
        this.retrieveResultForScreenB();
    }

    retrieveResultForScreenA()
    {
        // get results from API
    }

    render() {
        return (
            // render screen B results
        );
    }
}

class ScreenC extends Component {

    static navigationOptions = ({ navigation }) => ({ title: 'ScreenC' });

    constructor(props) {
        super(props);
    }

    componentWillMount()
    {
        this.retrieveResultForScreenC();
    }

    retrieveResultForScreenA()
    {
        // get results from API
    }

    render() {
        return (
            // render screen C results
        );
    }
}

const MainScreen = TabNavigator({
  ScreenA: { screen: MyScreenA },
  ScreenB: { screen: MyScreenB },
  ScreenC: { screen: MyScreenC },
});

第一种方法的问题是：

如果用户切换屏幕，即使用户没有在任何屏幕上发送任何操作，应用程序也会获取并使用网络

第二种方法的问题是：

其他标签不会在调度的任何操作上更新（tabNavigator为所有屏幕渲染一次，就是这样）

如何将这两种方法结合起来，并使用最新的屏幕获得干净的代码？

Answer 1

回应评论中发生的讨论;

您真正想要的是一个可以触发特定用户操作更新的处理函数。这有点适合您的“条件渲染”设计模式。我举一个例子，但非常简化;

class MainScreen extends Component {
    state: Object;

    constructor(props) {
        super(props);

        this.state = { currentActiveScreen: 1 }
    }

    componentWillMount() {
        this.handleFetchRequest();
    }

    getTabSelection() {
        return (
            //some JSX with links that controls `state.currentActiveScreen`
        );
    }

    handleFetchRequest() {
        this.retrieveResultForScreenA();
        this.retrieveResultForScreenB();
        this.retrieveResultForScreenC();
    }

    getCurrentScreen() {
        if(this.state.currentActiveScreen === 1) {
            return <ScreenA onFetchRequest={this.handleFetchRequest}/>;
        }
        if(this.state.currentActiveScreen === 2) {
            return <ScreenB onFetchRequest={this.handleFetchRequest}/>;
        }
        if(this.state.currentActiveScreen === 3) {
            return <ScreenC onFetchRequest={this.handleFetchRequest}/>;
        }
    }

    render() {
        return <div>
            {this.getTabSelection()}
            {this.getCurrentScreen()}
        </div>;
    }
}

class ScreenA extends Component {
    render() {
        return <button onClick={this.props.onFetchRequest}/>;
    }
}

因此，在上面的示例中，组件首次安装时会调用handleFetchRequest一次，然后在用户单击ScreenA内呈现的按钮时再调用。组件的任何其他更新或重新呈现都不会导致重新获取。

您可以继续将此扩展到应触发重新提取的其他用户操作，例如输入字段的onFocus或onBlur。

条件渲染与TabNavigator

1 个答案: