我有一个视图,我试图通过react-native-router-flux模块加载。
但是,它没有在模拟器上显示屏幕。但是,我可以在react-dev工具中看到我的组件。
Android模拟器上没有看到任何错误,只有空屏幕。细节如下:
Test.js:
import React from 'react';
import { Text, View } from 'react-native';
const Test = () => {
return (
<View style={{margin: 128}}>
<Text>This is PageTwo!</Text>
</View>
);
};
export default Test;
我的路由器:Router.js
import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import LoginForm from './components/LoginForm';
import Test from './components/Test';
class RouterComponent extends Component {
render() {
return (
<Router>
<Scene key="root" >
<Scene key="pageOne" component={Test} title="PageOne" initial={true} />
<Scene key="pageTwo" component={LoginForm} title="PageOne" initial={false} />
</Scene>
</Router>
);
}
}
export default RouterComponent;
我的App Loader:
import React, { Component } from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import firebase from 'firebase';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import RouterComponent from './Router';
import LoginForm from './components/LoginForm';
class App extends Component {
componentWillMount() {
// Initialize Firebase
}
render() {
return (
<Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
<View>
<RouterComponent />
</View>
</Provider>
);
}
}
export default App;
Android模拟器屏幕:
React开发工具:
的package.json:
请帮忙。
我不认为是无状态组件的问题,我在包含<View>
的<RouterComponent>
组件中添加了一个flexbox样式,它可以在我的Android模拟器上运行,只需删除围绕<View>
的<RouterComponent>
包装器也可以:
class App extends Component {
render() {
return (
<Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
<View style={{ flex: 1 }}>
<RouterComponent />
</View>
</Provider>
);
}
}
在我们使用的app.js中有很多时间
container: {
backgroundColor: '#455e64',
flex : 1,
alignItems: 'center',
justifyContent: 'center',
}
alignItems: 'center',
所以我们可以得到同样的错误,我们需要删除alignItems:'center',从样式它将解决你的问题。
container: {
backgroundColor: '#455e64',
flex : 1,
justifyContent: 'center',
}
疯了吧。花了2个小时调试。想出该组件不应该是无状态的,你必须将它定义为扩展Component
的类。
所以在你的Test.js
而不是:
import React from 'react';
import { Text, View } from 'react-native';
const Test = () => {
return (
<View style={{margin: 128}}>
<Text>This is PageTwo!</Text>
</View>
);
};
export default Test;
做就是了:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Test extends Component {
render() {
return (
<View style={{margin: 128}}>
<Text>This is PageTwo!</Text>
</View>
);
}
};
export default Test;
刚刚为View
添加了一个flexbox样式,用于包装组件RouterComponent
。这个想法也适用于我的Android模拟器。或者你可以删除组件View
像:
class App extends Component {
componentWillMount() {
// Initialize Firebase
}
render() {
return (
<Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
<RouterComponent />
</Provider>
);
}
}
我希望这个想法可以帮助你。