即使使用交互管理器后，反应本地的过渡速度也很慢

Question

我面临着从一个场景到另一个场景的过渡速度问题。

已经尝试了东西

1. InteractionManager

2. 不使用touchbleopacity进行过渡

3. componentDidmount中的服务器调用异步请求。

4.互动软件包后开放的源也"但对我不起作用。"

5。

仍在过渡中，我的UI冻结了1秒

任何更多的东西以提高过渡的速度。

谢谢

编辑#Adding Code现在

class ReviewsFeed extends Component {
constructor(props) {
    super(props);
    this.state = {
        AuthHeader:'',
        renderPlaceholderOnly:true,
    };
}

componentDidMount(){
    InteractionManager.runAfterInteractions(() => {
        let realm = new Realm({
            schema: [{name: 'LoginAuth', properties: {LoginAuthKey: 'string'}}]
        });
        let backupdata = realm.objects('LoginAuth');
        let stringtoarray = backupdata[0].LoginAuthKey;
        let Authobjects = JSON.parse(stringtoarray);
        let replies = ["all"];
        let category_mentions= ["all"];
        let date_range = {
            "start":"2017-02-01",
            "end":"2017-02-28"
        };
        let nps="all";
        let properties = ["all"];
        let sources = ["all"];
        let tags = [];
        let limit = 6;
        let rating = -1;
        let skip = 0;

          // asynch request through redux            
       this.props.actions.ReviewsFeeddata(Authobjects,replies,category_mentions,date_range,nps,properties,sources,tags,limit,rating,skip);
        this.props.actions.Properties(Authobjects);
        this.setState({renderPlaceholderOnly: false});
    });
}
Issuescontainer(){
    InteractionManager.runAfterInteractions(() => {
        this.props.navigator.push({
            id:'Issuescontainer'
        })
    });
}
Reviewsfeed(){
    InteractionManager.runAfterInteractions(() => {
        this.props.navigator.push({
            id:'ReviewsFeed'
        })
    });
}
GuestFeedback(){
    InteractionManager.runAfterInteractions(() => {
        this.props.navigator.push({
            id:'GuestFeedback'
        })
    });
}
openDrawer() {
    this.refs['myDrawer'].openDrawer();
}
_renderPlaceholderView() {
    return (
        <View>
            <ReviewsHeader opentheDrawer={this.openDrawer.bind(this)} />
        </View>
    );
}
render() {
    if (this.state.renderPlaceholderOnly == true) {
        return this._renderPlaceholderView();
    }
    var navigationView = (
        <Container style={styles.FilterBackground}>
            <Content>
                <View style={styles.FilterHeader}>
                    <Text style={styles.FilterHeaderstyle}> Menu </Text>
                </View>
                <List>
                    <ListItem>
                        <Button style={styles.menubutton} light block onPress={this.Reviewsfeed.bind(this)}>
                            <Text>Reviews Feed</Text>
                        </Button>
                    </ListItem>

                    <ListItem>
                        <Button style={styles.menubutton} light block onPress={this.GuestFeedback.bind(this)}>
                            <Text>Guest Feedback</Text>
                        </Button>
                    </ListItem>
                    <ListItem>
                        <Button style={styles.menubutton} light  block onPress={this.Issuescontainer.bind(this)}>
                        <Text> Issues </Text>
                        </Button>
                    </ListItem>
                    <ListItem>
                        <Button style={styles.menubutton} light  block>
                            <Text> Sign Out </Text>
                        </Button>
                    </ListItem>
                </List>
            </Content>
        </Container>
    );
    return (
        <AfterInteractions>
        <DrawerLayoutAndroid
                             ref="myDrawer"
                             drawerWidth={300}
                             drawerPosition={DrawerLayoutAndroid.positions.Left}
                             renderNavigationView={() => navigationView}>
            <ReviewsHeader opentheDrawer={this.openDrawer.bind(this)} />
            <ReviewsFeedback navigator={this.props.navigator}/>

        </DrawerLayoutAndroid>
        </AfterInteractions>
    );
   }
    }

Answer 1

在开发环境中，这种缓慢是正常的。诸如Console.log之类的步骤会导致其放慢。

https://facebook.github.io/react-native/docs/performance.html