web-dev-qa-db-ja.com

React-Native Buttonスタイルが機能しない

Import_this

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

これは私のReactボタンコードですが、スタイルは動作しませんHare ...

<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'
    }
});

しかし、出力なし：私の電話のスクリーンショット：- Screenshot of my phone:-

reactjsreact-nativejsxreact-native-button
41
JavaScript Learner

React Native Buttonは、できることが非常に限られています。 ボタン

スタイルのpropがなく、<Button>txt</Button>のような「web-way」にテキストを設定せず、titleプロパティを使用します<Button title="txt" />

外観をさらに制御したい場合は、 TouchableOpacity などのTouchableXXXX 'コンポーネントのいずれかを使用する必要があります。これらは本当に使いやすいです:-)

63
Plaul

Buttonのマージンとパディングに問題がありました。 Buttonを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>
16
Hitesh Sahu

独自のボタンコンポーネントを作成したくない場合は、ボタンをビューでラップすることで手っ取り早く解決できます。これにより、少なくともレイアウトスタイリングを適用できます。

たとえば、これはボタンの行を作成します。

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

React Nativeボタンは、提供するオプションが非常に限られています。TouchableHighlightまたはTouchableOpacityを使用するには、これらの要素をスタイル設定して、ボタンをこのようにラッピングします。

             <TouchableHighlight 
                style ={{
                    height: 40,
                    width:160,
                    borderRadius:10,
                    backgroundColor : "yellow",
                    marginLeft :50,
                    marginRight:50,
                    marginTop :20
                }}>
            <Button onPress={this._onPressButton}            
            title="SAVE"
            accessibilityLabel="Learn more about this button"
          /> 
          </TouchableHighlight>

また、カスタマイズしたボタンに反応ライブラリを使用することもできます。素敵なライブラリの1つは、react-native-button（ https://www.npmjs.com/package/react-native-button ）です。

4
Kirti Chaturvedi

Buttonを使用する代わりに。あなたは反応ネイティブでテキストを使用してからタッチ可能にすることができます

<TouchableOpacity onPress={this._onPressButton}> 
   <Text style = {'your custome style'}>
       button name
   </Text>
</TouchableOpacity >
2
sajad saderi

自分自身を学習するだけですが、ビューでラップすると、ボタンの周りにスタイルを追加できる場合があります。

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>
    )
    })
  }
})
2
Philip Murphy

これを試して

<TouchableOpacity onPress={() => this._onPressAppoimentButton()} style={styles.Btn}>
    <Button title="Order Online" style={styles.Btn} > </Button>
</TouchableOpacity>
1
Karan Chunara

buttonStyle propを使用できます。
https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle

0
sayingu