प्रतिक्रिया-मूलनिवासी बटन शैली काम नहीं

Question

Import_this

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

यह मेरा बटन कोड लेकिन शैली से काम नहीं कर हरे प्रतिक्रिया ...

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

इसके अलावा, मैं इस कोड से कोशिश थी

<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> 

अद्यतन प्रश्न:

इसके अलावा, मैं इस तरह से कोशिश ..

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

शैली थी

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

लेकिन कोई बाहर: मेरे फोन की स्क्रीनशॉट: -

Answer 1

लगता है जैसे आप उपयोग कर रहे हैं मूल आधार 'पुस्तकालय। कोड मेरे लिए ठीक लगता है। क्या आप व्यू की शैली भी भेज सकते हैं?

इसके अलावा, यहां समस्या क्या है? क्या आप बटन बिल्कुल देख नहीं पाए हैं या आप यहां बाध्य कार्रवाई को कॉल करने में सक्षम नहीं हैं?

Answer 2

प्रतिक्रिया मूल बटन आप जो कर सकते हैं, उसमें बहुत सीमित है; Button

यह एक शैली प्रोप नहीं है, और आप पाठ "वेब तरह से" सेट नहीं करते <Button>txt</Button> की तरह लेकिन शीर्षक संपत्ति के माध्यम से <Button title="txt" />

आप उपस्थिति पर अधिक नियंत्रण है चाहते हैं आपको टच करने योग्य XXXXX घटकों में से एक का उपयोग करना चाहिए जैसे कि वे उपयोग करने में वास्तव में आसान हैं :-)

Answer 3

केवल खुद को सीखना, लेकिन एक दृश्य में लपेटने से आप बटन के चारों ओर शैलियों को जोड़ने की अनुमति दे सकते हैं।

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

आप अपने खुद के बटन घटक बनाने के लिए नहीं करना चाहते हैं, एक त्वरित और गंदे समाधान के लिए एक दृश्य है, जो आपको कम से कम लेआउट स्टाइल लागू करने के लिए अनुमति देता है में बटन रैप करने के लिए है।

उदाहरण के लिए इस बटन की एक पंक्ति बनाने होगा:

<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

मैं एक Button साथ मार्जिन और padding के साथ एक समस्या हुई। मैंने View घटक के अंदर बटन जोड़ा और 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>