如何在 React Native 中启动另一个组件
How to start another component in react native
我正在学习 react-native
编程,我在 index.android.js
中有一个组件。我在该组件中有一个 TouchableOpacity
。我想在单击 TouchableOpacity
时启动下一个组件。
<TouchableOpacity style={{ height: 40, marginTop: 10 , backgroundColor: '#2E8B57'}} onPress={}>
<Text style={{color: 'white', textAlign: 'center', marginTop: 10, fontWeight: 'bold'}}>LOGIN</Text>
</TouchableOpacity>
任何人都可以建议我如何在 onPress
中设置点击侦听器以及如何在单击它时启动下一个组件。
提前致谢。
您可以根据 state/props 在单个组件中进行条件渲染,所以可能是这样的:
render() {
return state.displayComponent?
<NewComponent /> :
<TouchableOpacity ... onPress={() => this.setState({displayComponent: true})} />
}
,但如果您正在寻找更强大的东西,请继续阅读 react-native-router-flux
像这样尝试
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
} = React;
var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {
snapVelocity: 8,
});
var CustomSceneConfig = Object.assign({}, BaseConfig, {
springTension: 100,
springFriction: 1,
gestures: {
pop: CustomLeftToRightGesture,
}
});
var PageOne = React.createClass({
_handlePress() {
this.props.navigator.push({id: 2,});
},
render() {
return (
<View style={[styles.container, {backgroundColor: 'green'}]}>
<Text style={styles.welcome}>Greetings!</Text>
<TouchableOpacity onPress={this._handlePress}>
<View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
<Text style={styles.welcome}>Go to page two</Text>
</View>
</TouchableOpacity>
</View>
)
},
});
var PageTwo = React.createClass({
_handlePress() {
this.props.navigator.pop();
},
render() {
return (
<View style={[styles.container, {backgroundColor: 'purple'}]}>
<Text style={styles.welcome}>This is page two!</Text>
<TouchableOpacity onPress={this._handlePress}>
<View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
<Text style={styles.welcome}>Go back</Text>
</View>
</TouchableOpacity>
</View>
)
},
});
var SampleApp = React.createClass({
_renderScene(route, navigator) {
if (route.id === 1) {
return <PageOne navigator={navigator} />
} else if (route.id === 2) {
return <PageTwo navigator={navigator} />
}
},
_configureScene(route) {
return CustomSceneConfig;
},
render() {
return (
<Navigator
initialRoute={{id: 1, }}
renderScene={this._renderScene}
configureScene={this._configureScene} />
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'white',
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
module.exports = SampleApp;
参考这个
touchable opacity
的全部意义在于触摸它。
将您的 Business Logic
放在单独的 class
中,并从 Touchable opacity 事件中调用它。然后在您的代码中随心所欲地使用该逻辑!
我正在学习 react-native
编程,我在 index.android.js
中有一个组件。我在该组件中有一个 TouchableOpacity
。我想在单击 TouchableOpacity
时启动下一个组件。
<TouchableOpacity style={{ height: 40, marginTop: 10 , backgroundColor: '#2E8B57'}} onPress={}>
<Text style={{color: 'white', textAlign: 'center', marginTop: 10, fontWeight: 'bold'}}>LOGIN</Text>
</TouchableOpacity>
任何人都可以建议我如何在 onPress
中设置点击侦听器以及如何在单击它时启动下一个组件。
提前致谢。
您可以根据 state/props 在单个组件中进行条件渲染,所以可能是这样的:
render() {
return state.displayComponent?
<NewComponent /> :
<TouchableOpacity ... onPress={() => this.setState({displayComponent: true})} />
}
,但如果您正在寻找更强大的东西,请继续阅读 react-native-router-flux
像这样尝试
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
} = React;
var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {
snapVelocity: 8,
});
var CustomSceneConfig = Object.assign({}, BaseConfig, {
springTension: 100,
springFriction: 1,
gestures: {
pop: CustomLeftToRightGesture,
}
});
var PageOne = React.createClass({
_handlePress() {
this.props.navigator.push({id: 2,});
},
render() {
return (
<View style={[styles.container, {backgroundColor: 'green'}]}>
<Text style={styles.welcome}>Greetings!</Text>
<TouchableOpacity onPress={this._handlePress}>
<View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
<Text style={styles.welcome}>Go to page two</Text>
</View>
</TouchableOpacity>
</View>
)
},
});
var PageTwo = React.createClass({
_handlePress() {
this.props.navigator.pop();
},
render() {
return (
<View style={[styles.container, {backgroundColor: 'purple'}]}>
<Text style={styles.welcome}>This is page two!</Text>
<TouchableOpacity onPress={this._handlePress}>
<View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
<Text style={styles.welcome}>Go back</Text>
</View>
</TouchableOpacity>
</View>
)
},
});
var SampleApp = React.createClass({
_renderScene(route, navigator) {
if (route.id === 1) {
return <PageOne navigator={navigator} />
} else if (route.id === 2) {
return <PageTwo navigator={navigator} />
}
},
_configureScene(route) {
return CustomSceneConfig;
},
render() {
return (
<Navigator
initialRoute={{id: 1, }}
renderScene={this._renderScene}
configureScene={this._configureScene} />
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'white',
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
module.exports = SampleApp;
参考这个
touchable opacity
的全部意义在于触摸它。
将您的 Business Logic
放在单独的 class
中,并从 Touchable opacity 事件中调用它。然后在您的代码中随心所欲地使用该逻辑!