将参数应用于 <View> 中的按钮
Apply parameters to a button in a <View>
嗨,这是我第一次发帖寻求帮助。例如,我想将一些字母间距和一些其他 css 应用到我的按钮,但我不能。我是编码的初学者,所以我想知道如何以最好的方式做到这一点,并具体解释以便我理解:)
这是我的代码:
import * as React from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Bienvenue{"\n"}</Text>
<Button
title="Accéder"
onPress={() => navigation.navigate('Mon écoute')}
/>
</View>
);
}
const styles = StyleSheet.create({
Button :{
letterSpacing:2,
}
})
function DetailsScreen() {
return (
<View style={{
flex: 1,
alignItems: 'center',
marginBottom : 540,
justifyContent: 'center' }}>
<Text>Quelle est votre humeur aujourd'hui?</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Mon écoute" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
enter image description here
而不是。使用按钮尝试 TouchableOpacity
<TouchableOpacity
onPress={() => navigation.navigate('Mon écoute')}
style={{padding:5,alignItems:'center',justifycontent:'center'}}
>
<Text style={{letterSpacing:0.5}} >"Hey"<Text>
</TouchableOpacity>
嗨,这是我第一次发帖寻求帮助。例如,我想将一些字母间距和一些其他 css 应用到我的按钮,但我不能。我是编码的初学者,所以我想知道如何以最好的方式做到这一点,并具体解释以便我理解:)
这是我的代码:
import * as React from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Bienvenue{"\n"}</Text>
<Button
title="Accéder"
onPress={() => navigation.navigate('Mon écoute')}
/>
</View>
);
}
const styles = StyleSheet.create({
Button :{
letterSpacing:2,
}
})
function DetailsScreen() {
return (
<View style={{
flex: 1,
alignItems: 'center',
marginBottom : 540,
justifyContent: 'center' }}>
<Text>Quelle est votre humeur aujourd'hui?</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Mon écoute" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
enter image description here
而不是。使用按钮尝试 TouchableOpacity
<TouchableOpacity
onPress={() => navigation.navigate('Mon écoute')}
style={{padding:5,alignItems:'center',justifycontent:'center'}}
>
<Text style={{letterSpacing:0.5}} >"Hey"<Text>
</TouchableOpacity>