Question

我正面临从一个场景到另一个场景的转换速度问题。

已经尝试过的东西

interactionManager，可
未使用touchbleopacity进行转换
在ComponentDidMount中调用来自服务器的异步请求。

4.open source在尝试交互包之后＆＃34;但对我来说没有用。＆＃34;

5.Even尝试了Next Frame npm包＆＃34;没有找到完美的例子来使用它... Lokks很好但是无法在react-native redux app中应用...以获得异步请求...＆＃34;

仍处于转换状态，我的用户界面冻结了1秒。

任何更多的事情都可以提高过渡速度。

由于

编辑#adding code nOW

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

即使使用交互管理器，React-native Transition Speed仍然很慢

1 个答案: