在React Native中显示文本和内联按钮可以通过组合Text
组件和TouchableOpacity
组件来实现。以下是一个简单的示例代码:
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
const App = () => {
const handleButtonPress = () => {
console.log('Button pressed!');
};
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, React Native!</Text>
<TouchableOpacity style={styles.button} onPress={handleButtonPress}>
<Text style={styles.buttonText}>Click Me</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
marginBottom: 20,
},
button: {
backgroundColor: '#007AFF',
paddingHorizontal: 20,
paddingVertical: 10,
borderRadius: 5,
},
buttonText: {
color: '#FFFFFF',
fontSize: 16,
},
});
export default App;
onPress
事件是否正确绑定,并且确保组件没有被其他组件遮挡。通过以上代码和解释,你应该能够在React Native中成功显示文本和内联按钮,并解决常见的开发问题。
领取专属 10元无门槛券
手把手带您无忧上云