Question

我是React Native的新手，正在研究一个实验应用程序，其中我使用了React Native Material Kit中的MKButton。

基于我的有限知识，我通过以下方式构造了MKButton：

const AddButton = MKButton.coloredButton()
    .withText('ADD').build();
class AddUpdateUser extends Component<Props> 
{
    ....
    render() {
        return (
            <View style={styles.addButton}>
                <AddButton onPress={this.onButtonPress.bind(this)}/>
            </View>
        );
}

以上效果很好。我还想根据状态字段更新该按钮的标签-我尝试了以下方法，但没有用：

const AddButton = MKButton.coloredButton()
    .withText(getButtonLabel).build();

const getButtonLabel = () =>
{
    if (!this.props.updateUser)
    {
        return 'ADD';
    }
    else
    {
        return 'UPDATE';
    }
}

谢谢！

Answer 1

$filepath

最佳做法是先定义const getButtonLabel = () => { if (!this.props.updateUser) { return 'ADD'; } else { return 'UPDATE'; } } const AddButton = MKButton.coloredButton() .withText(getButtonLabel()).build();，但我认为对您不起作用的原因是getButtonLabel被定义为一个函数，因此您需要在后面加上括号。您可能还需要对JSX编译器使用大括号，但如果没有尝试，我可能不会百分百确定（例如：getButtonLabel）

编辑。现在，我们查看了完整文件，似乎您还没有在Class定义中添加方法。因此，让我们将.withText({getButtonLabel()}).build();方法移动到封装在Class中。这将允许您访问getButtonLabel，它们将被传递给Class：

props

那么您知道该方法现在在您的类中如何了吗？这样一来，您就可以访问class AddPerson extends Component { static navigationOptions = { tabBarLabel: 'Add', tabBarIcon: ({tintColor}) => ( <Icon name={'plus'} size={75} style={{color: tintColor}} /> ) }; shouldComponentUpdate(nextProps, nextState) { return nextProps.toUpdate != this.props.toUpdate; } getButtonLabel = () => { if (!this.props.toUpdate) { return 'ADD'; } else { return 'UPDATE'; } } onAddButtonPress() { const newOrModifiedPerson = { first_name: this.state.first_name, last_name: this.state.last_name, phone: this.state.phone, email: this.state.email, company: this.state.company, project: this.state.project, notes: this.state.notes }; if (!this.props.toUpdate) { this.props.createNewContact(newOrModifiedPerson); this.props.navigation.navigate('PeopleList'); } else { this.props.updateContact(newOrModifiedPerson); } } render() { return ( <ScrollView showsVerticalScrollIndicator={false}> <View style={styles.container}> <Text>{this.props.toUpdate ? 'Update Details' : 'Add New Person'}</Text> <MKTextField textInputStyle={styles.fieldStyles} placeholder={'First Name'} value={this.props.first_name} tintColor={MKColor.Teal} onChangeText={first_name => this.setState({first_name})}/> <MKTextField textInputStyle={styles.fieldStyles} placeholder={'Last Name'} tintColor={MKColor.Teal} onChangeText={last_name => this.setState({last_name})}/> <MKTextField textInputStyle={styles.fieldStyles} placeholder={'Phone Number'} tintColor={MKColor.Teal} onChangeText={phone => this.setState({phone})}/> <MKTextField textInputStyle={styles.fieldStyles} placeholder={'Email'} tintColor={MKColor.Teal} onChangeText={email => this.setState({email})}/> <MKTextField textInputStyle={styles.fieldStyles} placeholder={'Company'} tintColor={MKColor.Teal} onChangeText={company => this.setState({company})}/> <MKTextField textInputStyle={styles.fieldStyles} placeholder={'Project'} tintColor={MKColor.Teal} onChangeText={project => this.setState({project})}/> <MKTextField textInputStyle={styles.fieldStyles} placeholder={'Notes'} tintColor={MKColor.Teal} onChangeText={notes => this.setState({notes})}/> <View style={styles.addButton}> <AddButton onPress={this.onAddButtonPress.bind(this)}/> </View> </View> </ScrollView> ); } }，而您本来不会访问它。

Answer 2

我发现上述问题的唯一可行的方法是-需要更多的编写并匹配常规CSS：

<MKButton
  backgroundColor={MKColor.Teal}
  shadowRadius={2}
  shadowOffset={{width:0, height:2}}
  shadowOpacity={.7}
  shadowColor="black"
  onPress={() => {
    console.log('hi, raised button!');
  }}
  >
  <Text pointerEvents="none"
        style={{color: 'white', fontWeight: 'bold',}}>
    RAISED BUTTON
  </Text>
</MKButton>

通过以上用法，可以在运行时更新MKButton的标签。但是我怀疑是否有任何方法可以使用.build()在运行时更新标签。这么受欢迎的框架真可惜。

状态更改时更新MKButton'withText'值

2 个答案: