-React Native styl Przycisk nie działa

Question

Import_this

import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';

moje To React kod przycisku Ale styl nie działa Hare ...

<Button 
    onPress={this.onPress.bind(this)} 
    title={"Go Back"} 
    style={{color: 'red', marginTop: 10, padding: 10}} 
/> 

Również miałem spróbować przez ten kod

<Button 
     containerStyle={{padding:10, height:45, overflow:'hidden', 
     borderRadius:4, backgroundColor: 'white'}} 
     style={{fontSize: 20, color: 'green'}} 
     onPress={this.onPress.bind(this)} title={"Go Back"} 
     > Press me! 
</Button> 

Aktualizacja Pytanie:

Również miałem spróbować w ten sposób ..

<Button 
    onPress={this.onPress.bind(this)} 
    title={"Go Back"} 
    style={styles.buttonStyle} 
>ku ka</Button> 

Style

const styles = StyleSheet.create({ 
    buttonStyle: { 
     color: 'red', 
     marginTop: 20, 
     padding: 20, 
     backgroundColor: 'green' 
    } 
}); 

ale żaden się umieścić: Zrzut ekranu z mojego telefonu: -

Answer 1

Wygląda używasz " biblioteka "natywna baza". Kod wydaje mi się w porządku. Czy możesz również przesłać styl widoku?

Co tu jest problemem? Czy nie widzisz w ogóle przycisków lub nie możesz wywołać tutaj związanej czynności?

Answer 2

Przycisk natywny reagujący jest bardzo ograniczony co można zrobić; Button

Nie ma styl prop, a nie ustawić tekst „web-way” jak <Button>txt</Button> ale za pośrednictwem właściwości tytułowej <Button title="txt" />

Jeśli chcesz mieć większą kontrolę nad wyglądem powinieneś użyć jednego z komponentów TouchableXXXX, takich jak TouchableOpacity Są one naprawdę łatwe w użyciu :-)

Answer 3

Samo samodzielne uczenie się, ale zawijanie w widoku może umożliwiać dodawanie stylów wokół przycisku.

const Stack = StackNavigator({ 
    Home: { 
    screen: HomeView, 
    navigationOptions: { 
     title: 'Home View' 
    } 
    }, 
    CoolView: { 
    screen: CoolView, 
    navigationOptions: ({navigation}) => ({ 
     title: 'Cool View', 
     headerRight: (<View style={{marginRight: 16}}><Button 
     title="Cool" 
     onPress={() => alert('cool')} 
     /></View> 
    ) 
    }) 
    } 
}) 

Answer 4

Jeśli nie chcesz, aby stworzyć swój własny składnik Button, szybkie i brudne rozwiązaniem jest owinąć przycisku w widoku, który pozwala na przynajmniej zastosować układ stylizacji.

Na przykład to tworzy się rząd przycisków:

<View style={{flexDirection: 'row'}}> 
    <View style={{flex:1 , marginRight:10}} > 
     <Button title="Save" onPress={() => {}}></Button> 
    </View> 
    <View style={{flex:1}} > 
     <Button title="Cancel" onPress={() => {}}></Button> 
    </View> 
</View> 

Answer 5

miałem problem z marginesu i wyściółką z Button. Dodałem Button wewnątrz komponentu View i zastosuję twoje właściwości do View.

<View style={{margin:10}}> 
<Button 
    title="Decrypt Data" 
    color="orange" 
    accessibilityLabel="Tap to Decrypt Data" 
    onPress={() => { 
    Alert.alert('You tapped the Decrypt button!'); 
    }} 
    /> 
</View>